import { Dispatch, SetStateAction } from "react"
import { useTranslation } from "react-i18next"
import { Button } from "../../../ui-component/button/button.component"
import { Icon } from "../../../ui-component/icon/icon.component"
import { Input } from "../../../ui-component/input/input.component"
import { Textarea } from "../../../ui-component/textarea/textarea.component"
import styles from "./build-team.module.css"

export function BuildAboutProject({
  step,
  projectName,
  textAreas,
  setTextAreas,
  setProjectName,
  onNext,
}: {
  step: number
  projectName: {
    name: string
    description: string
  }
  textAreas: string[]
  setTextAreas: Dispatch<SetStateAction<string[]>>
  setProjectName: Dispatch<
    SetStateAction<{
      name: string
      description: string
    }>
  >
  onNext: () => void
}) {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------
  const { t: translate } = useTranslation()

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

  function handleAddFunction() {
    if (textAreas.length < 10) {
      setTextAreas([...textAreas, ""])
    }
  }

  function handleTextareaChange(index: number, newValue: string) {
    const updatedTextAreas = textAreas.map((textarea, idx) =>
      idx === index ? newValue : textarea,
    )
    setTextAreas(updatedTextAreas)
  }

  // ---------------------------------------------------------------------------
  return (
    <div className={styles.buildAboutProject}>
      {/* --------------------------------------------------------------------------- */}
      {/* TITLE & BACK ICON */}
      {/* --------------------------------------------------------------------------- */}

      <div className={styles.aboutProjectWrap}>
        <h2>About project</h2>
        <div className={styles.titleUnderlineWrap}>
          {[...Array(5)].map((_, index) => (
            <div
              key={index}
              className={styles.titleUnderline}
              style={{
                backgroundColor:
                  index === 3 && step === 4 ? "#5807c9" : "#E9D5FC",
              }}
            />
          ))}
        </div>
      </div>
      <div className={styles.buildAboutContainer}>
        {/* --------------------------------------------------------------------------- */}
        {/* LEFT SIDE */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.buildAboutWrap}>
          <div className={styles.leftSide}>
            <Input
              placeholder="Enter the name of the project"
              value={projectName.name}
              onValueChange={(val) =>
                setProjectName((prev) => ({ ...prev, name: val }))
              }
            />
            <span className={styles.characters}>max 100 characters</span>
            <div className={styles.textArea}>
              <Textarea
                style={{ width: "100%", height: "100%" }}
                placeholder="Describe the project"
                value={projectName.description}
                onValueChange={(val) =>
                  setProjectName((prev) => ({ ...prev, description: val }))
                }
              />
            </div>
            <div className={styles.charactersWrap}>
              <p className={styles.characters}>max 1000 characters</p>
            </div>
          </div>
        </div>

        {/* --------------------------------------------------------------------------- */}
        {/* LINE */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.verticalLine} />

        {/* --------------------------------------------------------------------------- */}
        {/* RIGHT SIDE */}
        {/* --------------------------------------------------------------------------- */}

        <div className={styles.buildAboutWrap}>
          <div className={styles.rightSide}>
            {textAreas.map((textarea, index) => (
              <div key={index} className={styles.textAreaList}>
                <Textarea
                  style={{ minHeight: "6rem" }}
                  placeholder="Description the project"
                  value={textarea}
                  onValueChange={(val) => handleTextareaChange(index, val)}
                />
                <span className={styles.characters}>max 100 characters</span>
              </div>
            ))}
            {/* --------------------------------------------------------------------------- */}
            {/* ADD FUNCTION */}
            {/* --------------------------------------------------------------------------- */}

            {textAreas.length < 10 && (
              <div className={styles.addFunction} onClick={handleAddFunction}>
                <Icon
                  name="fa-light fa-plus"
                  className={styles.iconPlus}
                  size="1.6"
                />
                <span className={styles.addFunctionText}>Add a function</span>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* --------------------------------------------------------------------------- */}
      {/* BUTTON */}
      {/* --------------------------------------------------------------------------- */}

      <div className={styles.sendBtn}>
        <Button mode="outline" className={styles.nextBtn} onClick={onNext}>
          {translate("button.next")}
        </Button>
      </div>
    </div>
  )
}
add validation for input and textarea