import React, {ReactNode} from 'react';
import CustomTextField from "../../UI/CustomTextField/CustomTextField";
import {createMeeting} from "../../../API/notifications";
import {useNavigate} from "react-router-dom";
import Meeting from "../../../models/Meeting";
import addMeetingFooterImg from "../../../assets/images/add-meeting-footer.svg";
import FormButtonAlt from "../../UI/FormButtonAlt/FormButtonAlt";
import {toastInfo} from "../../../services/toaster";
import useAbortController from "../../../hooks/useAbortController";
import useLoading from "../../../hooks/useLoading";
import CustomFormSection from "../../UI/CustomFormSection/CustomFormSection";
import CustomLabel from "../../UI/CustomLabel/CustomLabel";
import MakeCustomSelect from "../../UI/CustomSelect/MakeCustomSelect";

type AddMeetingFormProps = {
    children?: ReactNode
    formData: Meeting
    setFormData: any

}

const typeOptions = [
    {
        value: 'Τακτική Συνεδρίαση',
        name: 'Τακτική Συνεδρίαση'
    }, {
        value: 'Συνεδρίαση',
        name: 'Συνεδρίαση'
    }]

const placeOptions = [
    {
        value: 'Διοικητικού Συμβουλίου',
        name: 'Διοικητικού Συμβουλίου'
    }, {
        value: 'Αίθουσα 2',
        name: 'Αίθουσα 2'
    },

]


const AddMeetingForm = ({formData, setFormData}: AddMeetingFormProps) => {


    const navigate = useNavigate()
    // const [isLoading, setIsLoading] = useState(false)
    const [isLoading, setIsLoading] = useLoading(false)
    useAbortController()
    // used to cancel unfinished request when componentnt is unmounted


    const handleSubmit = async () => {

        setIsLoading(true)
        try {
            const res = await createMeeting(formData);
            toastInfo(res.data.message)
            navigate('success');
        } catch {
        } finally {
            setIsLoading(false);
        }
    }

    const isValid = () => {
        return (formData.number && formData.date && formData.time)
    }


    return (
        <div id={"add-meeting-form"}>
            <div className="inner-container">
                <form onSubmit={(e) => {
                    e.preventDefault()
                    handleSubmit()
                }}>
                    <CustomFormSection theme={"user-form"}>
                        <div className="row gy-5 gx-5">

                            <div className="col-xl-6 input-wrapper number flex-grow-1">

                                <CustomLabel>
                                    ΑΡΙΘΜΟΣ ΣΥΝΕΔΡΙΑΣΗΣ
                                </CustomLabel>
                                <CustomTextField
                                    required
                                    theme={"user-form-field"}
                                    value={formData.number}
                                    onChange={(s) => {
                                        setFormData({
                                            ...formData,
                                            number: s
                                        })
                                    }}

                                />
                            </div>
                            <div className="col-xl-6 input-wrapper type flex-grow-1">
                                <CustomLabel>
                                    ΕΙΔΟΣ ΣΥΝΕΔΡΙΑΣΗΣ
                                </CustomLabel>
                                <MakeCustomSelect
                                    placeholder={"Παρακαλώ επιλέξτε"}
                                    theme='form'
                                    options={typeOptions}
                                    value={formData.type}
                                    handleChange={(s) => {
                                        setFormData({
                                            ...formData,
                                            type: s,
                                        });
                                    }}
                                />

                            </div>
                        </div>
                    </CustomFormSection>

                <div>
                    <CustomFormSection theme={"user-form"}>
                        <div className="row gy-5 gx-5">

                    <div className="col-md-4 input-wrapper date">
                        <p className="label">Ημερομηνία:</p>
                        <CustomTextField
                            value={formData.date}
                            onChange={(s) => {
                                setFormData({
                                    ...formData,
                                    date: s
                                })
                            }}

                        />
                    </div>

                    <div className="col-4 input-wrapper time">
                        <p className="label">Ώρα:</p>
                        <CustomTextField
                            value={formData.time}
                            onChange={(s) => {
                                setFormData({
                                    ...formData,
                                    time: s
                                })
                            }}

                        />
                    </div>
                        </div>
                    </CustomFormSection>
                            <CustomFormSection theme={"user-form"}>
                                <div className="row gy-5 gx-5">
                    <div className="col-4 input-wrapper place">
                        <p className="label">Αίθουσα</p>
                        <MakeCustomSelect
                            theme='form'
                            options={placeOptions}
                            value={formData.place}
                            handleChange={(s) => {
                                setFormData({
                                    ...formData,
                                    place: s
                                })
                            }}/>
                    </div>

                    <div className="col-12 input-wrapper link">
                        <p className='label'>Διαθέσιμο Zoom Link:</p>
                        <CustomTextField
                            value={formData.link}
                            onChange={(s) => {
                                setFormData({
                                    ...formData,
                                    link: s
                                })
                            }}

                        />
                    </div>
                                </div>
                            </CustomFormSection>
                    <div className="col-12 input-wrapper">
                        <FormButtonAlt
                            isDisabled={!isValid()}
                            text='Προσθήκη Συνεδρίασης'
                            buttonType='submit'
                            isLoading={isLoading}
                        />
                    </div>
            </div>
        </form>
</div>
    <div className="add-meeting-footer-img-container">
        <img src={addMeetingFooterImg}></img>
    </div>
</div>
)
    ;
}

export default AddMeetingForm;