import { Fragment, useEffect, useState } from "react"
import style from "./admin-build-product-list.module.css"
import { Icon } from "../../../ui-component/icon/icon.component"
import { BuildProductType } from "../../../types/build-team.type"
import { Config } from "../../../utils/config"

export function AdminBuildProductList() {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const [buildProducts, setBuildProducts] = useState<BuildProductType[]>([])
  const [show, setShow] = useState<boolean[]>([])

  // ---------------------------------------------------------------------------
  // effect
  // ---------------------------------------------------------------------------

  useEffect(() => {
    loader()
  }, [])

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  async function loader() {
    try {
      const response = await fetch(`${Config.url}/api/buildTeam/getProducts`, {
        method: "GET",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
      })

      if (!response.ok) {
        alert("Something went wrong!")
        return
      }
      const result: BuildProductType[] = await response.json()
      setBuildProducts(result)
      setShow(new Array(result.length).fill(false))
    } catch (error) {
      alert("Network error. Please try again.")
    }
  }

  function toggleShow(index: number) {
    setShow((prevShow) =>
      prevShow.map((item, i) => (i === index ? !item : item)),
    )
  }

  // ---------------------------------------------------------------------------
  return (
    <div className={style.tableContainer}>
      <div className={style.subContainer}>
        <table className={style.table}>
          {/* --------------------------------------------------------------------------- */}
          {/* TABLE */}
          {/* --------------------------------------------------------------------------- */}

          <thead className={style.subTable}>
            <tr>
              <th className={style.tableHead}>Date</th>
              <th className={style.tableHead} style={{ width: "15%" }}>
                Creator
              </th>
              <th className={style.tableHead}>Type of Product</th>
              <th className={style.tableHead} style={{ width: "25%" }}>
                Engineers
              </th>
              <th className={style.tableHead} style={{ width: "25%" }}>
                Skills
              </th>
              <th className={style.tableHead} style={{ width: "7%" }}>
                Team Size
              </th>
            </tr>
          </thead>
          {buildProducts.map((buildProduct, index) => (
            <>
              <tbody className={style.subTable}>
                <tr key={index} className={style.tableFooterItems}>
                  <td className={style.tableBodyDate}>
                    {buildProduct.created_at}
                  </td>
                  <td className={style.tableContact}>
                    <p className={style.tableContactMobile}>
                      {buildProduct.user.name}
                    </p>
                    <p className={style.tableContactMobile}>
                      {buildProduct.user.phone}
                    </p>
                    <p className={style.tableContactMobile}>
                      {buildProduct.user.email}
                    </p>
                  </td>
                  <td className={style.tableBodyEngineers}>
                    {buildProduct.fabric.title}
                  </td>
                  <td className={style.tableBodyEngineers}>
                    <span className={style.tableTitle}>Engineers</span>
                    <div className={style.skill}>
                      {buildProduct.stacks.map((stack) => (
                        <span>
                          {stack.name} +{stack.count},
                        </span>
                      ))}
                    </div>
                  </td>
                  <td className={style.tableBody} style={{ width: "30%" }}>
                    <span className={style.tableTitle}>Skills</span>
                    <div className={style.skill}>
                      {buildProduct.skills.map((skill) => (
                        <span>{skill.name}, </span>
                      ))}
                    </div>
                  </td>
                  <td className={style.tableBody}>
                    <span className={style.tableTitle}>Team Size</span>
                    {buildProduct.teamSize}
                  </td>
                </tr>
                {show[index] && (
                  <tr>
                    <td colSpan={4}>
                      <div className={style.projectWrapperData}>
                        <span className={style.title}>Title Project</span>
                        <span className={style.itemText}>
                          {buildProduct.project_info.title}
                        </span>
                      </div>
                      <div className={style.projectWrapper}>
                        <span className={style.title}>Description</span>
                        <span className={style.itemText}>
                          {buildProduct.project_info.description}
                        </span>
                      </div>
                    </td>
                    <td colSpan={3}>
                      <div className={style.item}>
                        <span className={style.title}>Function</span>
                        <div className={style.functionData}>
                          {buildProduct.project_info.functionality.map(
                            (functionality, index) => (
                              <span className={style.itemTextFunction}>
                                {index + 1}. {functionality}
                              </span>
                            ),
                          )}
                        </div>
                      </div>
                    </td>
                  </tr>
                )}
                <tr>
                  <td colSpan={6} className={style.bottomBtn}>
                    <div
                      className={style.bottomElement}
                      onClick={() => toggleShow(index)}
                    >
                      {show[index] ? (
                        <>
                          <span className={style.moreText}>Wrap</span>

                          <Icon
                            name="fa-light fa-chevron-up"
                            size="1.6"
                            style={{ color: "#5807C9" }}
                          />
                        </>
                      ) : (
                        <>
                          <span className={style.moreText}>More</span>
                          <Icon
                            name="fa-light fa-chevron-down"
                            size="1.6"
                            style={{ color: "#5807C9" }}
                          />
                        </>
                      )}
                    </div>
                  </td>
                </tr>
              </tbody>
              {/* --------------------------------------------------------------------------- */}
              {/* TABLE FOR MOBILE */}
              {/* --------------------------------------------------------------------------- */}

              <tbody className={style.tableMob}>
                <Fragment key={index}>
                  <tr>
                    <td>
                      <span className={style.tableBodyDateMobile}>
                        {buildProduct.created_at}
                      </span>
                    </td>
                    <td style={{ borderLeft: "1px solid #ddd" }}>
                      <p className={style.tableContactMobile}>
                        {buildProduct.user.name}
                      </p>
                      <p className={style.tableContactMobile}>
                        {buildProduct.user.phone}
                      </p>
                      <p className={style.tableContactMobile}>
                        {buildProduct.user.email}
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p className={style.teamTitle}>Product Type</p>
                      <span className={style.engineerText}>
                        {buildProduct.fabric.title}
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p className={style.teamTitle}>Engineers</p>
                      <div className={style.skill}>
                        {buildProduct.stacks.map((stack) => (
                          <span className={style.engineerText}>
                            {stack.name} +{stack.count},{" "}
                          </span>
                        ))}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p className={style.teamTitle}>Skills</p>
                      <div className={style.skill}>
                        {buildProduct.skills.map((skill) => (
                          <span className={style.engineerText}>
                            {skill.name},{" "}
                          </span>
                        ))}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p className={style.teamTitle}>Team size</p>
                      <span className={style.engineerText}>
                        {buildProduct.teamSize}
                      </span>
                    </td>
                  </tr>
                  {show[index] && (
                    <>
                      <tr>
                        <td colSpan={4}>
                          <div className={style.projectWrapperData}>
                            <span className={style.teamTitle}>
                              Title Project
                            </span>
                            <span className={style.itemText}>
                              {buildProduct.project_info.title}
                            </span>
                          </div>
                          <div className={style.projectWrapper}>
                            <span className={style.teamTitle}>Description</span>
                            <span className={style.itemText}>
                              {buildProduct.project_info.description}
                            </span>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div className={style.item}>
                            <span className={style.teamTitle}>Function</span>
                            <div className={style.functionData}>
                              {buildProduct.project_info.functionality.map(
                                (functionality, index) => (
                                  <span className={style.itemTextFunction}>
                                    {index + 1}. {functionality}
                                  </span>
                                ),
                              )}
                            </div>
                          </div>
                        </td>
                      </tr>
                    </>
                  )}
                  <tr>
                    <td colSpan={6} className={style.bottomBtn}>
                      <div
                        className={style.bottomElement}
                        onClick={() => toggleShow(index)}
                      >
                        {show[index] ? (
                          <>
                            <span className={style.moreText}>Wrap</span>

                            <Icon
                              name="fa-light fa-chevron-up"
                              size="1.6"
                              style={{ color: "#5807C9" }}
                            />
                          </>
                        ) : (
                          <>
                            <span className={style.moreText}>More</span>
                            <Icon
                              name="fa-light fa-chevron-down"
                              size="1.6"
                              style={{ color: "#5807C9" }}
                            />
                          </>
                        )}
                      </div>
                    </td>
                  </tr>
                </Fragment>
              </tbody>
            </>
          ))}
        </table>
      </div>
    </div>
  )
}
 {buildProduct.created_at} is a number. I need to convert it to Date. How to do it ?