import { useState } from "react"
import { BuildTeamType } from "./build-team-type.component"
import { BuildTeamTools } from "./build-team-tools.component"
import { BuildTeamPayment } from "./build-team-payment.component"
import styles from "./build-team.module.css"
import { BuildTeamMember } from "./build-team-member.component"
import { useTranslation } from "react-i18next"
import { Icon } from "../../../ui-component/icon/icon.component"

export function BuildTeam({
  stage,
  setStage,
}: {
  stage: number
  setStage: (value: number) => void
}) {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const [step, setStep] = useState(1)
  const [selectedProject, setSelectedProject] = useState<string | null>(null)
  const [selectedTools, setSelectedTools] = useState<string[]>([])
  const [teamSize, setTeamSize] = useState<number | null>(null)
  const { t } = useTranslation()
  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  const handleNextStep = () => {
    setStep(step + 1)
    setStage(1)
  }

  const handlePrevStep = () => {
    if (step === 2) {
      setStage(0)
      setStep(step - 1)
    } else {
      setStep(step - 1)
    }
  }

  // ---------------------------------------------------------------------------
  return (
    <>
      {/* --------------------------------------------------------------------------- */}
      {/* BACK ICON */}
      {/* --------------------------------------------------------------------------- */}

      {stage === 1 && (
        <>
          {(step === 2 || step === 3 || step === 4) && (
            <div className={styles.backIconWrap}>
              <div className={styles.backIconSubWrap} onClick={handlePrevStep}>
                <Icon
                  name="fal fa-chevron-left"
                  className={styles.backIcon}
                  size="auto"
                />
                <p className={styles.backIconText}>{t("button.back")}</p>
              </div>
              <Icon
                name="fal fa-xmark"
                className={styles.xIcon}
                size="1.6"
                onClick={() => setStep(1)}
              />
            </div>
          )}
        </>
      )}

      <div className={styles.contentCardWrap}>
        {step === 1 && (
          <BuildTeamType
            selectedProject={selectedProject}
            setSelectedProject={setSelectedProject}
            onNext={handleNextStep}
          />
        )}

        {/* --------------------------------------------------------------------------- */}
        {/* TOOLS */}
        {/* --------------------------------------------------------------------------- */}

        {step === 2 && (
          <BuildTeamTools
            step={step}
            selectedTools={selectedTools}
            setSelectedTools={setSelectedTools}
            onNext={handleNextStep}
          />
        )}

        {/* --------------------------------------------------------------------------- */}
        {/* PAYMENT */}
        {/* --------------------------------------------------------------------------- */}

        {step === 3 && (
          <BuildTeamPayment
            step={step}
            teamSize={teamSize}
            setTeamSize={setTeamSize}
            onNext={handleNextStep}
          />
        )}

        {/* --------------------------------------------------------------------------- */}
        {/* MEMBER */}
        {/* --------------------------------------------------------------------------- */}

        {step === 4 && <BuildTeamMember />}
      </div>
    </>
  )
}
this is main component I'll ask you in next