import React, {FormEvent, useState} from "react";
import CustomFormSection from "../../../UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../../UI/Forms/CustomLabel/CustomLabel";
import useFormValidate from "../../../../hooks/useValidateForm";
import {toastWarn} from "../../../../services/toaster";
import ActionModal from "../../../UI/Modal/ActionsModal/ActionModal";
import FormButtonSubmit from "../../../UI/Forms/FormButton/FormButtonSubmit";
import '../../../Settings/ProfileSettings/responsive-modals.scss';
import {DealForm} from "../../../../models/Rescom/RescomCollaborator";
import dayjs, {Dayjs} from "dayjs";
import CustomDatePicker from "../../../UI/Forms/CustomDateTimePicker/CustomDatePicker";
import CustomTextField from "../../../UI/Forms/CustomTextField/CustomTextField";
import FormButtonCancel from "../../../UI/Forms/FormButton/FormButtonCancel";
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
import FormButtonsContainer from "../../../UI/Forms/FormButton/FormButtonsContainer";
import Govoulis from "../../../SVG/Govoulis";
import CustomCheckbox from "../../../UI/Forms/CustomCheckbox/CustomCheckbox";


type CreateModalProps = {
    onClose: () => void
    handleCreate: (formdata: DealForm) => void
    userId: string
}

const FormRules = {

}



const CreateModal = ({onClose, userId, handleCreate}: CreateModalProps) => {
    const today = dayjs();

    const FormInit: DealForm = {
        user_id: userId,
        id: 0,
        is_active: true,
        start_date: today,              // today
        end_date: today.add(1, 'year'), // one year after today
        amount: ''
    };
    const [checkForErrors, formErrors] = useFormValidate(FormRules)
    const [formData, setFormData] = useState({...FormInit});
    const handleDealCreation = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        if (checkForErrors(formData)) {
            toastWarn('Συμπληρώστε όλα τα υποχρεωτικά πεδία σωστά.')
            return
        }
        handleCreate(formData)

    }

    return (



        <ActionModal onClose={onClose} customClass={'settings-modal'}>
            <div className='confirmation-modal--image-container'>
                <Govoulis
                    colorWhite={'var(--white)'}
                    colorBlue={'var(--secondary-color)'}/>
            </div>

            <h4 className={'confirmation-modal--title'}>{'Επεξεργασία/ Δημιουργία Συμφωνηθέντων'}</h4>
            <p className={'confirmation-modal--text'}>
                Παρακαλώ συμπληρώστε ή επεξεργαστείτε τα παρακάτω πεδία
            </p>
            <div className='authorization-list-modal--body-container'>
                <form onSubmit={handleDealCreation}>
                    <CustomFormSection theme={"default"}>
                        <LocalizationProvider dateAdapter={AdapterDayjs}>
                        <div className="row">
                            <div className={'col-12 col-xl-3'}>
                                <CustomLabel>
                                    ΤΡΕΧΟΥΣΑ ΣΥΜΦΩΝΙΑ
                                </CustomLabel>
                                <CustomCheckbox
                                    id="active_agreement"
                                    checked={formData.is_active}
                                    onChange={()=>{setFormData({...formData,
                                        is_active:!formData.is_active})}}
                                    label={<p>NAI</p>}
                                />
                            </div>
                            <div className={'col-12 col-xl-3'}><CustomLabel>
                                ΗΜΕΡΟΜΗΝΙΑ ΑΠΟ
                            </CustomLabel>
                                <CustomDatePicker
                                    value={formData.start_date}
                                    onChange={(newValue: Dayjs | null) =>
                                        setFormData({...formData, start_date:newValue})
                                    }
                                />
                            </div>
                            <div className={'col-12 col-xl-3'}><CustomLabel>
                                ΗΜΕΡΟΜΗΝΙΑ ΕΩΣ
                            </CustomLabel>
                                <CustomDatePicker
                                    value={formData.end_date}
                                    onChange={(newValue: Dayjs | null) =>
                                        setFormData({...formData, end_date:newValue})
                                    }
                                />
                            </div>
                            <div className={'col-12 col-xl-3'}>   <CustomLabel>ΠΟΣΟ (€)</CustomLabel>
                                <CustomTextField

                                    id={`dealamount_${formData.id}`}
                                    value={formData.amount}
                                    onChange={(value: string) =>
                                        setFormData({...formData,amount:value})
                                    }
                                />
                            </div>
                        </div>
                        </LocalizationProvider>
                    </CustomFormSection>
                    <div className={'buttons-container d-flex justify-content-center'}>
                        <FormButtonsContainer justify={'center'} align={''}>
                        <FormButtonCancel onClick={onClose}>ΑΚΥΡΩΣΗ</FormButtonCancel>
                            <FormButtonSubmit >ΚΑΤΑΧΩΡΗΣΗ</FormButtonSubmit></FormButtonsContainer>
                    </div>
                </form>
            </div>
        </ActionModal>);
}

export default CreateModal;