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 { useState } from "react"
import { Config } from "../../../utils/config"

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 BuildTeamType({
  selectedProject,
  setSelectedProject,
  onNext,
}: {
  selectedProject: string | null
  setSelectedProject: (projects: string | null) => void
  onNext: () => void
}) {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const { t } = useTranslation()
  const [loading, setLoading] = useState(false)

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

  function handleItemClick(title: string) {
    if (selectedProject === title) {
      setSelectedProject(null)
    } else {
      setSelectedProject(title)
    }
  }

  async function handleSubmit() {
    setLoading(true)

    const requestData = {
      title: selectedProject,
      photoUrl: buildItems.map((item) => item.image).join(" "),
    }

    try {
      const response = await fetch(`${Config.url}/api/team/addKind`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(requestData),
        credentials: "include",
      })

      if (!response.ok) {
        throw new Error("Network response was not ok")
      }

      const result = await response.json()
      console.log(result)
      onNext()
    } catch (error) {
      console.error("Error:", error)
    } finally {
      setLoading(false)
    }
  }

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

      <div className={styles.contentCardWrap}>
        {buildItems.map((build, index) => (
          <div
            key={index}
            className={styles.contentCard}
            onClick={() => handleItemClick(build.title)}
          >
            <Checkbox
              className={styles.checkbox}
              mode="checkbox"
              color="#07C96C"
              size={14}
              checked={selectedProject === build.title}
              onClick={() => handleItemClick(build.title)}
            />
            <div className={styles.contentSubWrap}>
              <img
                src={build.image}
                width={build.width}
                height={build.height}
              />
              <div className={styles.contentTitle}>{build.title}</div>
            </div>
          </div>
        ))}
      </div>

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

      <div className={styles.nextBtnWrap}>
        <Button
          mode="outline"
          className={styles.nextBtn}
          disabled={!selectedProject || loading}
          onClick={handleSubmit}
        >
          {loading ? "Loading..." : t("button.next")}
        </Button>
      </div>
    </>
  )
}
build-team-type.component.tsx:96 
 GET http://localhost:9090/ 404 (Not Found)

build-team-type.component.tsx:113 Error: 
Error: Network response was not ok
    at handleSubmit (build-team-type.component.tsx:106:15)
﻿