import { useState } from "react"

import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
import ContentText from "@/components/panel/ContentText"
import { dayOfWeek, timeEachTurn, turnsPerDay } from "./listSelector"
import FieldIcon from "@/app/component/FieldIcon"
import { Button } from "@mui/material"
import PlusBlueP from "@/components/icons/PlusBlueP"
import ClockP from "@/components/icons/ClockP"

function Form() {

    const [data, setData] = useState({
        start_time: '',
        end_time: ''
    });
    const [selected, setSelected] = useState({
        numberOfTurns: '',
        timeOfEachTurn: ''
    });

    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })

    const changeData = (value, type, name) =>
        setData({
            ...data,
            [name]: value
        });

    return (
        <div className="flex flex-col w-full-content">
            <div className="flex w-full items-center justify-start gap-[16px]">
                <ContentText text='تعداد نوبت در هر روز'>
                    <AutoCompleteSelect
                        updateData={updateSelect}
                        label='انتخاب کنید...'
                        name='numberOfTurns'
                        list={turnsPerDay}
                    />
                </ContentText>
                <ContentText text='تعداد نوبت در هر روز'>
                    <AutoCompleteSelect
                        updateData={updateSelect}
                        label='انتخاب کنید...'
                        name='numberOfTurns'
                        list={timeEachTurn}
                    />
                </ContentText>
                <div className="content-text-panel"></div>
                <div className="min-w-[152px]"></div>
            </div>
            <div className="flex items-end justify-center gap-[16px] mt-[32px]">
                <ContentText text='تعداد نوبت در هر روز'>
                    <AutoCompleteSelect
                        updateData={updateSelect}
                        label='انتخاب کنید...'
                        name='numberOfTurns'
                        list={dayOfWeek}
                    />
                </ContentText>
                <ContentText text='زمان شروع'>
                    <FieldIcon
                        placeholder='انتخاب کنید...'
                        changeData={changeData}
                        icon={<ClockP />}
                        name='start_time'
                    />
                </ContentText>
                <ContentText text='زمان پایان'>
                    <FieldIcon
                        placeholder='انتخاب کنید...'
                        changeData={changeData}
                        icon={<ClockP />}
                        name='end_time'
                    />
                </ContentText>
                <Button
                    variant="outlined"
                    className="!border-[#5559CE] !gap-[4px] !min-w-[152px]"
                >
                    <PlusBlueP />
                    اضافه کردن
                </Button>
            </div>
        </div>
    )
}

export default Form