import * as React from "react"
import { Container, CustomLink } from "@/components"
import t from "@/constants/wording"
import * as styles from "./index.module.scss"
import wechat from "@/assets/images/personal-application-wechat.png"
import useContactForm from "@/hooks/useContactForm"

interface IProps {
  contactUs: ContactUs
  location: ILocation
}

const ContactUs: React.FC<IProps> = props => {
  const { contactUs, location } = props

  const { dom: ContactFormDOM, handleOpen } = useContactForm(location)

  const getContent = (list: ContactUsBtn, index: number) => {
    if (list.name === "机构申请") {
      return (
        <button
          onClick={handleOpen}
          className={`button is-white is-medium ${styles.operateBtn}`}
          key={index}
        >
          {list.name}
        </button>
      )
    } else if (list.link) {
      return (
        <CustomLink
          linkTo={list.link}
          className={`button is-white is-medium ${styles.operateBtn}`}
          key={index}
        >
          {list.name}
        </CustomLink>
      )
    } else if (list.type === "personal application") {
      return (
        <div
          className={`button is-white is-medium ${styles.operateBtn} ${styles.btnPopoverContent}`}
          key={index}
        >
          {list.name}
          <div className={styles.btnPopover}>
            <div className={styles.btnPopoverInner}>
              <img
                alt={t("personal application wechat describe")}
                src={wechat}
              />
              <p>{t("scan the code by mobile phone")}</p>
            </div>
          </div>
        </div>
      )
    }
  }

  return (
    <>
      <div className={styles.contactUs}>
        <Container className={styles.contactUsContainer}>
          <h1>{contactUs.title}</h1>
          <div>
            {contactUs.btnList.map((list, index) => getContent(list, index))}
          </div>
        </Container>
      </div>
      {ContactFormDOM}
    </>
  )
}

export default ContactUs