import { useState } from "react"
import styles from "./build-team.module.css"
import { Checkbox } from "../../ui-component/checkbox/checkbox.component.tsx"
import { IoPersonCircleOutline } from "react-icons/io5"
import { Button } from "../../ui-component/button/button.component.tsx"

interface TeamMember {
  role: string
}

interface Team {
  name: string
  members: TeamMember[]
  color: string
  checked: boolean
}

const initialTeams: Team[] = [
  {
    name: "Product Team A",
    members: [{ role: "Front End" }, { role: "Back End" }],
    color: "#FFEB3B",
    checked: false,
  },
  {
    name: "Product Team B",
    members: [
      { role: "Front End" },
      { role: "Back End" },
      { role: "Product Manager" },
      { role: "Front End" },
    ],
    color: "#C8E6C9",
    checked: false,
  },
  {
    name: "Product Team C",
    members: [
      { role: "Front End" },
      { role: "Back End" },
      { role: "Product Manager" },
      { role: "Front End" },
      { role: "Front End" },
    ],
    color: "#F8BBD0",
    checked: false,
  },
]

export function BuildTeamMember() {
  const [teams, setTeams] = useState<Team[]>(initialTeams)
  const [selectedTeam, setSelectedTeam] = useState<string | null>(null)

  const handleCheckboxClick = (teamName: string) => {
    setTeams((prevTeams) =>
      prevTeams.map((team) =>
        team.name === teamName ? { ...team, checked: !team.checked } : team,
      ),
    )
  }
  return (
    <div className={styles.memberContainer}>
      {/* --------------------------------------------------------------------------- */}
      {/* TITLE */}
      {/* --------------------------------------------------------------------------- */}

      <h2 className={styles.title}>Select the command</h2>

      {/* --------------------------------------------------------------------------- */}
      {/* LIST */}
      {/* --------------------------------------------------------------------------- */}

      <div className={styles.teamList}>
        {teams.map((team) => (
          <div
            key={team.name}
            className={`${styles.teamCard} ${selectedTeam === team.name ? styles.selected : ""}`}
            onClick={() => {
              handleCheckboxClick(team.name)
              setSelectedTeam(team.name)
            }}
          >
            <h3
              style={{ backgroundColor: team.color }}
              className={styles.teamName}
            >
              {team.name}
              <Checkbox
                mode="radio-button"
                color="#07C96C"
                checked={team.checked}
                onClick={() => {
                  handleCheckboxClick(team.name)
                }}
              />
            </h3>
            <ul className={styles.teamNameBlock}>
              {team.members.map((member, index) => (
                <li key={index}>
                  <span className={styles.icon}>
                    <IoPersonCircleOutline size={40} />
                  </span>
                  {member.role}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

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

      <div className={styles.actions}>
        <Button mode="outline" className={styles.backButton}>
          Generate list
        </Button>
        <Button
          mode="primary"
          className={styles.nextButton}
          disabled={!selectedTeam}
        >
          Complete
        </Button>
      </div>
    </div>
  )
}
please make it single select not multiple