import { useTranslation } from "react-i18next"
import styles from "./build-team.module.css"
import { Checkbox } from "../../../ui-component/checkbox/checkbox.component"
import { Button } from "../../../ui-component/button/button.component"
import { Config } from "../../../utils/config"
import { useEffect, useState } from "react"
import { TeamKindType } from "../../../types/team-kind.type"
import { useAuth } from "../../../ui-component/auth-context/auth-context"
import { useModal } from "../../../ui-component/modal"
import { UserSignInComponent } from "../../user-sign-in/user-sign-in.component"
import { useCookies } from "react-cookie"
import { CurrentUserType } from "../../../types/user.type"

// const buildItems = [
//   {
//     image: "../../../public/icons/browser.svg",
//     title: "Front End Developer",
//     width: 40,
//     height: 40,
//   },
//   {
//     image: "../../../public/icons/product-manager.svg",
//     title: "Product Manager",
//     width: 40,
//     height: 40,
//   },
//   {
//     image: "../../../public/icons/data-science.svg",
//     title: "Data Science",
//     width: 40,
//     height: 40,
//   },
//   {
//     image: "../../../public/icons/ux-designer.svg",
//     title: "UX/UI Designer",
//     width: 40,
//     height: 40,
//   },
//   {
//     image: "../../../public/icons/ai-expert.svg",
//     title: "AI Expert",
//     width: 40,
//     height: 40,
//   },
//   {
//     image: "../../../public/icons/cloud-engineer.svg",
//     title: "Cloud Engineer",
//     width: 40,
//     height: 40,
//   },
//   {
//     image: "../../../public/icons/business-metric.svg",
//     title: "Business Metric",
//     width: 40,
//     height: 40,
//   },
//   {
//     image: "../../../public/icons/backend-developer.svg",
//     title: "Back End Developer",
//     width: 40,
//     height: 40,
//   },
// ]

export function BuildTeamKind({
  selectedKinds,
  setSelectedKinds,
  onNext,
}: {
  selectedKinds: TeamKindType[]
  setSelectedKinds: (kinds: TeamKindType[]) => void
  onNext: () => void
}) {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const modal = useModal()
  const { t: translate } = useTranslation()
  const { user } = useAuth()

  const [kinds, setKinds] = useState<TeamKindType[]>([])
  const [currentUser, setCurrentUser] = useState<CurrentUserType | null>(user)
  const [cookies] = useCookies(["accessToken", "refreshToken"])

  // ---------------------------------------------------------------------------
  // useeffect
  // ---------------------------------------------------------------------------

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

  useEffect(() => {
    const currentUser = localStorage.getItem("currentUser")
    if (!currentUser) return
    setCurrentUser(JSON.parse(currentUser))
  }, [cookies, user])

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

  function handleItemClick(kind: TeamKindType) {
    if (selectedKinds.some((selected) => selected.id === kind.id)) {
      setSelectedKinds(
        selectedKinds.filter((selected) => selected.id !== kind.id),
      )
    } else {
      setSelectedKinds([...selectedKinds, kind])
    }
  }

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

    const result: TeamKindType[] = await response.json()

    setKinds(result)
  }

  // ---------------------------------------------------------------------------
  return (
    <>
      {/* --------------------------------------------------------------------------- */}
      {/* CONTENT */}
      {/* --------------------------------------------------------------------------- */}

      <div className={styles.contentCardWrap}>
        {kinds
          .sort((a, b) => a.order - b.order)
          .map((kind) => (
            <div
              key={kind.id}
              className={styles.contentCard}
              onClick={() => handleItemClick(kind)}
            >
              <Checkbox
                className={styles.checkbox}
                mode="checkbox"
                color="#07C96C"
                size={14}
                checked={selectedKinds.some(
                  (selected) => selected.id === kind.id,
                )}
                onClick={() => handleItemClick(kind)}
              />
              <div className={styles.contentSubWrap}>
                <img
                  src={`${Config.imageUrl + kind.photoUrl}`}
                  width={40}
                  height={40}
                />
                <div className={styles.contentTitle}>{kind.title}</div>
              </div>
            </div>
          ))}
      </div>

      {/* --------------------------------------------------------------------------- */}
      {/* BUTTONS */}
      {/* --------------------------------------------------------------------------- */}

      <div className={styles.nextBtnWrap}>
        <Button
          mode="outline"
          className={styles.nextBtn}
          disabled={selectedKinds.length === 0}
          onClick={() => {
            currentUser && cookies.accessToken && cookies.refreshToken
              ? onNext()
              : modal.open({
                  component: <UserSignInComponent />,
                  width: "80rem",
                  closeOnEsc: true,
                  closeOnOutsideClick: true,
                  modalClassName: styles.modal,
                })
          }}
        >
          {translate("button.next")}
        </Button>
      </div>
    </>
  )
}
How can I make my fetch to be called only once