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 ActionModal from "../../../UI/Modal/ActionsModal/ActionModal";
import PageTitle from "../../../UI/Typography/PageTitle";
import FormButtonSubmit from "../../../UI/Forms/FormButton/FormButtonSubmit";
import CloseButton from "../../../UI/CloseButton/CloseButton";
import Typography from "../../../UI/Typography/Typography";
import {DealForm, DealUpdateForm} from "../../../../models/Rescom/RescomCollaborator";
import CustomToggler from "../../../UI/CustomToggler/CustomToggler";
import CustomDatePicker from "../../../UI/Forms/CustomDateTimePicker/CustomDatePicker";
import {Dayjs} from "dayjs";
import CustomTextField from "../../../UI/Forms/CustomTextField/CustomTextField";
import FormButtonCancel from "../../../UI/Forms/FormButton/FormButtonCancel";
import FormButtonsContainer from "../../../UI/Forms/FormButton/FormButtonsContainer";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
import Govoulis from "../../../SVG/Govoulis";
import CustomCheckbox from "../../../UI/Forms/CustomCheckbox/CustomCheckbox";


type EditModalProps = {
    userId: string
    deal: any
    onClose: () => void
    handleUpdate: (formdata: DealUpdateForm) => void
}


const FormRules = {}

const EditModal = ({deal, onClose, userId, handleUpdate}: EditModalProps) => {
    const [formData, setFormData] = useState<DealUpdateForm>({
        user_id: userId,
        id: deal.id,
        is_active: deal.is_active,
        end_date: deal.end_date,
        start_date: deal.start_date,
        amount: deal.amount,
    });
    const [checkForErrors, formErrors] = useFormValidate(FormRules)
    const handleDealUpdate = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        if (checkForErrors(formData)) {
            return
        }
        handleUpdate(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={handleDealUpdate}>
                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                        <CustomFormSection theme={"default"}>
                            <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>
                        </CustomFormSection>
                    </LocalizationProvider>
                    <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 EditModal;