import * as React from "react"
import { Link } from "gatsby"
import cls from "classnames"
import { Container, CustomLink, Icon } from "@/components"
import t from "@/constants/wording"
import {
  FOOTERDATA,
  PLATFORMLIST,
  FOOTER_COMPANY_DESCRIBE,
  BEIAN_MIIT_LINK,
  BEIAN_GOW_LINK,
} from "@/constants/footer"
import * as styles from "./index.module.scss"
import Wechat from "@/assets/images/wechat.png"
import beian from "@/assets/images/beian.png"
import {EN_URL, JA_URL} from "@/constants/header";
import {friendlyLinks} from "@/constants/friendly-link";
import OutLink from "@/components/OutLink";
import classNames from "classnames";

interface paramsType {
  title?: string
  path?: string
  isBlank?: boolean
  isSubTitle?: boolean
  isEmpty?: boolean
}

const getListContent = (list: paramsType, index: number) => {
  return (
    <p
      className={`${list.isSubTitle ? styles.subTitle : ""} ${
        list.isEmpty ? styles.empty : ""
      }`}
      key={index}
    >
      {list.path ? (
        (list.path.startsWith("mailto:") || list.path.startsWith("tel:")) ? (
          <a href={list.path}>{list.title}</a>
        ) : (
          <CustomLink linkTo={list.path}>{list.title}</CustomLink>
        )
      ) : (
        list.title
      )}
    </p>
  )
}

const Footer: React.FC = () => {
  const [popover, setPopover] = React.useState(false)

  return (
    <div className={styles.footer}>
      <Container>
        <div className={styles.footerTop}>
          {FOOTERDATA.map((list, index) => (
            <div className={styles.region} key={index}>
              <h4>{list.title}</h4>
              <div className={styles.regionContent}>
                {list.data.map((item: paramsType, i: number) =>
                  getListContent(item, i)
                )}
              </div>
            </div>
          ))}
          <div className={cls(styles.region, styles.regionBig)}>
            <h4>{FOOTER_COMPANY_DESCRIBE.h4}</h4>
            <p>{FOOTER_COMPANY_DESCRIBE.p}</p>
            <div className={styles.platform}>
              {PLATFORMLIST.map((list, index) => (
                <a href={list.path} target="_blank" key={index}>
                  <Icon
                    name={list.iconName}
                    className={styles[list.iconName]}
                  />
                </a>
              ))}

              <div
                className={styles.wechatContent}
                onMouseEnter={() => setPopover(true)}
                onMouseLeave={() => setPopover(false)}
                onTouchStart={() => setPopover(!popover)}
              >
                <Icon name="wechat" />
                {popover && (
                  <div className={styles.wechatTooltip}>
                    <div className={styles.tooltipInner}>
                      <img src={Wechat} alt={t("PingCAP official account")} />
                      <div>
                        <p>{t("add an official account")}：</p>
                        <p>pingcap2015</p>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
            <div className={styles.contact_and_link}>
              <div>
                <Link
                  className={`button is-primary ${styles.contactUs}`}
                  to="/contact"
                >
                  {t("contact us")}
                </Link>
              </div>
              <div className="dropdown is-right is-hoverable">
                <div className="dropdown-trigger">
                  <button className={classNames("button", styles.friendly_link)} aria-haspopup="true" aria-controls="dropdown-menu">
                    <span>友情链接</span>
                    <span className="icon is-small">
                      {/*  <i className="fas fa-angle-down" aria-hidden="true" />*/}
                      <Icon name="arrow_drop_down_black_24dp" />{/*  &#xe648;*/}
                    </span>
                  </button>
                </div>
                <div className="dropdown-menu" id="dropdown-menu4" role="menu">
                  <div className={classNames("dropdown-content", styles.friendly_link_content)}>
                    {friendlyLinks.map((value, index) => (
                      <OutLink key={index} href={value.url} className="dropdown-item">
                        {value.name}
                      </OutLink>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={cls(styles.footerBottom, styles.subTitle)}>
          <p>
            © {new Date().getFullYear()} {t("company name")}
          </p>
          <p>
            <a href={BEIAN_MIIT_LINK} target="_blank">
              {t("beian miit")}
            </a>
          </p>
          <p>
            <a href={BEIAN_GOW_LINK} target="_blank">
              <img className={styles.beian} alt={t("beian gow")} src={beian} />
              {t("beian gow")}
            </a>
          </p>
        </div>
      </Container>
    </div>
  )
}

export default Footer