import * as React from "react"
import { Container } from "@/components"
import { CONSULT_DETAIL, ENTERPRISE_DESCRIPTION } from "@/constants/product"
import t from "@/constants/wording"
import * as productStyles from "../choice-product/index.module.scss"
import * as styles from "./index.module.scss"
import useContactForm from "@/hooks/useContactForm"

interface IProps {
  location: ILocation
}

interface UlList {
  className: string
  data: string[]
}

const EnterpriseDescription: React.FC<IProps> = ({ location }) => {
  const { dom: ContactFormDOM, handleOpen } = useContactForm(location)
  return (
    <>
      <div className={styles.enterpriseDescription}>
        <Container isSmall={true}>
          <p className={styles.consultDetail}>{CONSULT_DETAIL}</p>
          <div className={productStyles.enterprise}>
            <div
              onClick={handleOpen}
              className={`${productStyles.operateBtn} ${styles.consultBtn}`}
            >
              {t("immediately consult")}
            </div>
          </div>
          <hr className={styles.hr} />
          <div className={styles.detailContent}>
            {ENTERPRISE_DESCRIPTION.map((list, index) => (
              <div key={index}>
                <h2 id={list.id ?? ""}>{list.h2}</h2>
                {list.p && <p>{list.p}</p>}
                {list.ul &&
                  list.ul.length > 0 &&
                  list.ul.map((ulList: UlList, ulIndex: number) => (
                    <ul
                      className={styles[ulList.className ?? ""]}
                      key={ulIndex}
                    >
                      {ulList.data.map((item: React.ReactNode, liIndex: number) => (
                        <li key={liIndex}>{item}</li>
                      ))}
                    </ul>
                  ))}
                {list.table && (
                  <table>
                    <thead>
                      <tr>
                        {list.table.header.map(
                          (tableHeader, tableHeaderIndex) => (
                            <th key={tableHeaderIndex}>{tableHeader}</th>
                          )
                        )}
                      </tr>
                    </thead>
                    <tbody>
                      {list.table.body.map(
                        (tableBody: string[], tableBodyIndex: number) => (
                          <tr key={tableBodyIndex}>
                            {tableBody.map(
                              (tdText: string, tdIndex: number) => (
                                <td
                                  key={tdIndex}
                                  dangerouslySetInnerHTML={{ __html: tdText }}
                                ></td>
                              )
                            )}
                          </tr>
                        )
                      )}
                    </tbody>
                  </table>
                )}
              </div>
            ))}
          </div>
        </Container>
      </div>
      {ContactFormDOM}
    </>
  )
}

export default EnterpriseDescription