import React, {ReactNode} from 'react';
import ReactDOM from "react-dom";
import CustomTextField from "../../UI/Forms/CustomTextField/CustomTextField";
import {createMeeting} from "../../../API/old_notifications";
import {useNavigate} from "react-router-dom";
import Meeting from "../../../models/Notification/Meeting";
import addMeetingFooterImg from "../../../assets/images/add-meeting-footer.svg";
import {toastInfo} from "../../../services/toaster";
import useAbortController from "../../../hooks/useAbortController";
import DuaLoader from '../../UI/Loader/DuaLoader/DuaLoader';
import useLoading from "../../../hooks/useLoading";
import CustomFormSection from "../../UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../UI/Forms/CustomLabel/CustomLabel";
import MakeCustomSelect from "../../UI/Forms/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"}>
            {
                isLoading &&
                ReactDOM.createPortal(
                    <div className="dua-loader-portal">
                        <DuaLoader/>
                    </div>,
                    document.body
                )
            }
            <div className="inner-container">
                <form onSubmit={(e) => {
                    e.preventDefault()
                    handleSubmit()
                }}>
                    <CustomFormSection theme={"default"}>
                        <div className="row gy-5 gx-5">

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

                                <CustomLabel>
                                    ΑΡΙΘΜΟΣ ΣΥΝΕΔΡΙΑΣΗΣ
                                </CustomLabel>
                                <CustomTextField
                                    id={'number'}
                                    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={"Παρακαλώ επιλέξτε"}
                                    options={typeOptions}
                                    value={formData.type}
                                    handleChange={(s) => {
                                        setFormData({
                                            ...formData,
                                            type: s,
                                        });
                                    }}
                                />

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

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

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

                                    />
                                </div>

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

                                    />
                                </div>
                            </div>
                        </CustomFormSection>
                        <CustomFormSection theme={"default"}>
                            <div className="row gy-5 gx-5">
                                <div className="col-4 input-wrapper place">
                                    <p className="label">Αίθουσα</p>
                                    <MakeCustomSelect
                                        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
                                        id={'link'}
                                        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;