"use client"
import { useState } from "react"

import useLang from "@/hooks/useLang"

import Button from "../TempDesignSystem/Button"
import Divider from "../TempDesignSystem/Divider"
import GuestsRoomPicker from "./GuestsRoomPicker"

import styles from "./guests-rooms-picker.module.css"

import {
  GuestsRoom,
  GuestsRoomsPickerProps,
} from "@/types/components/bookingWidget/guestsRoomsPicker"

export default function GuestsRoomsPicker({
  handleOnSelect,
  initialSelected = [
    {
      adults: 1,
      children: [],
    },
  ],
  closePicker,
}: GuestsRoomsPickerProps) {
  const lang = useLang()
  const [selectedGuests, setSelectedGuests] =
    useState<GuestsRoom[]>(initialSelected)

  function handleSelectRoomGuests(
    selectedGuestsRoom: GuestsRoom,
    index: number
  ) {
    let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
    updatedSelectedGuests[index] = selectedGuestsRoom
    handleOnSelect(updatedSelectedGuests)
    setSelectedGuests(updatedSelectedGuests)
  }

  function addRoom() {
    if (selectedGuests.length < 4) {
      let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
      updatedSelectedGuests.push({
        adults: 1,
        children: [],
      })
      setSelectedGuests(updatedSelectedGuests)
      handleOnSelect(updatedSelectedGuests)
    }
  }

  function removeRoom(index: number) {
    if (selectedGuests.length > 1) {
      let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
      updatedSelectedGuests.splice(index, 1)
      setSelectedGuests(updatedSelectedGuests)
      handleOnSelect(updatedSelectedGuests)
    }
  }

  return (
    <>
      {selectedGuests.map((room, index) => (
        <section key={index}>
          <GuestsRoomPicker
            room={room}
            handleOnSelect={handleSelectRoomGuests}
            index={index}
          />
          <Divider></Divider>
          {index > 0 ? (
            <Button intent="text" onClick={() => removeRoom(index)}>
              Remove Room
            </Button>
          ) : null}
        </section>
      ))}
      <div className={styles.footer}>
        {selectedGuests.length < 4 ? (
          <Button intent="text" onClick={addRoom}>
            Add Room
          </Button>
        ) : null}
        <Button onClick={closePicker}>Done</Button>
      </div>
    </>
  )
}