import React, {FormEvent, useEffect, useState} from "react";
import CustomFormSection from "../../../UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../../UI/Forms/CustomLabel/CustomLabel";
import CustomSelect from "../../../UI/Forms/CustomSelect/CustomSelect";
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 {AuthorizationForm, AuthorizationUpdateForm} from "../../../../models/Settings/Authorization";
import CloseButton from "../../../UI/CloseButton/CloseButton";
import Typography from "../../../UI/Typography/Typography";
import {getMicroServices} from "../../../../API/settings";
import SelectItem from "../../../UI/Forms/CustomSelect/SelectItem";
import InputFake from "../../../UI/Typography/InputFake";


type EditModalProps = {
    authorization: any
    onClose: () => void
    handleUpdate: (formdata: AuthorizationForm) => void
}


const FormRules = {
    microservices: {
        condition: (e: any) => {
            if(e.length === 0) {
                return false;
            } else {
                return true;
            }
        },
        message: 'Παρακαλώ επιλέξτε τουλάχιστον μία υπηρεσία'
    },
}

const EditModal = ({authorization, onClose, handleUpdate}: EditModalProps) => {
    const [selectData, setSelectData] = useState<any>({})
    const [formData, setFormData] = useState<AuthorizationUpdateForm>({
        id:authorization.id,
        agent_id: authorization.agent.id,
        microservices: authorization.microservices.map((m: any) => m.id)
    });
    const [checkForErrors, formErrors] = useFormValidate(FormRules)
    const handleAuthorizationUpdate = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        if (checkForErrors(formData)){
            return
        }
        handleUpdate(formData)
    }

    useEffect(() => {
        (async () => {
            try {

                const res = await getMicroServices()

                setSelectData({
                    'microservices': res.data
                })
            } catch (e) {
                // this should catch all exceptions
            }
        })();
// eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
        <ActionModal onClose={onClose} customClass={'settings-modal'}>
            <div className='authorization-list-modal--header-container d-flex justify-content-between align-items-top'>
                <div><PageTitle>Επεξεργασία Εξουσιοδότησης / <Typography
                    tag={'span'}
                    fontSize={'20px'}
                    fontWeight={'700'}
                    letterSpacing={'0.4px'}
                    color={'var(--mainColor)'}
                >
                    {authorization.agent.full_name}
                </Typography></PageTitle>
                    <Typography
                        tag={'p'}
                        fontSize={'16px'}
                        fontWeight={'200'}
                        letterSpacing={'0.3px'}
                        color={'#707070'}
                    >
                        Η εξουσιοδότηση στον συνεργάτη σας, του δίνει πρόσβαση σε όλες τις υπογραφές που είναι
                        διαθέσιμες προς εξουσιοδότηση.
                    </Typography></div>
                <div>
                    <CloseButton onClick={onClose}/>
                </div>

            </div>
            <div className='authorization-list-modal--body-container'>
                <form onSubmit={handleAuthorizationUpdate}>
                    <CustomFormSection theme={"default"}>
                        <div className="row">
                            <div className={'col-12 col-xl-6'}>
                                <CustomLabel>
                                    * EMAIL ΣΥΝΕΡΓΑΤΗ
                                </CustomLabel>
                                <InputFake>
                                    {authorization.agent.email}
                                </InputFake>
                            </div>
                            <div className={'col-12 col-xl-6'}><CustomLabel>
                                * ΕΠΙΛΕΞΤΕ ΥΠΗΡΕΣΙΕΣ
                            </CustomLabel>
                                <CustomSelect
                                    multiple
                                    clearable
                                    hasError={formErrors?.microservices}
                                    value={formData.microservices}
                                    theme={"user-form-select"}
                                    handleChange={(e) => {
                                        setFormData({
                                            ...formData,
                                            microservices: e

                                        })
                                    }}
                                >
                                    {
                                        selectData?.microservices?.map((ms:any)=>
                                            <SelectItem key={ms.value} value={ms.value}>{ms.name}</SelectItem>
                                        )
                                    }
                                </CustomSelect>
                            </div>
                        </div>
                    </CustomFormSection>
                    <div className={'buttons-container d-flex justify-content-center'}>
                        <FormButtonSubmit>Αποθήκευση</FormButtonSubmit>
                    </div>
                </form>
            </div>
        </ActionModal>)
        ;
}

export default EditModal;