import { Col, Row } from "antd";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ThemeContext } from "styled-components";
import I from "components/I";
import React, { useContext } from "react";

import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";

const ModalIndicator = ({
  title,
  tipIcons,
  tips,
  marginTop,
  imageUrl,
  textAlign,
}) => {
  const theme = useContext(ThemeContext);
  const tips_ = tips || [];
  const marginTop_ = marginTop || "80px";
  const textAlign_ = textAlign || "left";

  let tipsDiv;
  if (tipIcons && tips && tipIcons.length === tips.length) {
    tipsDiv = tips_.map((tip, i) => (
      <div
        style={{
          textAlign: textAlign_,
          margin: "16px",
        }}
        key={i}
      >
        <Row>
          <Col span={2}>{tipIcons[i]}</Col>
          <Col span={22}>{tip}</Col>
        </Row>
      </div>
    ));
  } else {
    tipsDiv = tips_.map((tip, i) => (
      <div
        style={{
          textAlign: textAlign_,
          margin: "16px",
        }}
        key={i}
      >
        {tip}
      </div>
    ));
  }

  return (
    <div>
      <FontAwesomeIcon
        icon={faCircleNotch}
        size="2x"
        spin
        style={{ margin: "20px", marginTop: marginTop_ }}
      />

      <div
        style={{
          margin: "16px",
          paddingLeft: "20px",
          paddingRight: "20px",
          color: theme.primary,
          fontSize: "1rem",
        }}
      >
        <I s={title} />
      </div>

      <div
        style={{
          fontSize: "0.85rem",
          color: theme.textWhite,
        }}
      >
        {tipsDiv}
      </div>

      {imageUrl ? (
        <div>
          <img
            alt="check metamask plugin icon"
            style={{
              userSelect: "none",
              height: "80px",
              marginTop: "16px",
              filter: "drop-shadow(0 10px 10px rgba(0, 0, 0, 0.2)",
            }}
            src={imageUrl}
          />
        </div>
      ) : (
        <span />
      )}
    </div>
  );
};

export default ModalIndicator;