import CustomFormSection from "../../../UI/CustomFormSection/CustomFormSection";
import CustomLabel from "../../../UI/CustomLabel/CustomLabel";
import CustomTextField from "../../../UI/CustomTextField/CustomTextField";
import CustomSelect from "../../../UI/CustomSelect/CustomSelect";
import React, {FormEvent, useEffect, useState} from "react";
import {Authorization, AuthorizationForm} from "../../../../models/Settings/Authorization";
import useFormValidate from "../../../../hooks/useValidateForm";
import {toastError, toastSuccess, toastWarn} from "../../../../services/toaster";
import useLoading from "../../../../hooks/useLoading";
import ActionModal from "../../../UI/Modal/ActionsModal/ActionModal";
import PageTitle from "../../../UI/Typography/PageTitle";
import PageSubTitle from "../../../UI/Typography/PageSubtitle";
import FormButtonSubmit from "../../../UI/FormButton/FormButtonSubmit";
import CloseButton from "../../../UI/CloseButton/CloseButton";
import {duaUsersEmails} from "../../../../API/dua";
import SelectItem from "../../../UI/CustomSelect/SelectItem";
import Typography from "../../../UI/Typography/Typography";
import {getMicroServices} from "../../../../API/settings";


type CreateModalProps = {
    onClose: () => void
    handleCreate: (formdata: AuthorizationForm) => void
}

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

const FormInit: AuthorizationForm = {
    agent_id: 0,
    microservices: [],
}

const CreateModal = ({onClose, handleCreate}: CreateModalProps) => {

    const [checkForErrors, formErrors] = useFormValidate(FormRules)
    const [formData, setFormData] = useState({...FormInit});
    const [selectData, setSelectData] = useState<any>({})

    const handleAuthorizationCreate = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        if (checkForErrors(formData)) {
            toastWarn('Συμπληρώστε όλα τα υποχρεωτικά πεδία σωστά.')
            return
        }
        handleCreate(formData)

    }

    useEffect(() => {
        (async () => {
            try {
                const res = await duaUsersEmails()
                const res2 = await getMicroServices()
                setSelectData({
                    'users': res.data,
                    'microservices': res2.data

                })
            } catch (e) {
                // this should catch all exceptions
            }
        })();

    }, [])


    return (
        <ActionModal onClose={onClose} customClass={'settings-modal'}>
            <div className='authorization-list-modal--header-container d-flex justify-content-between align-items-top'>
                <div><PageTitle>Δημιουργία Εξουσιοδότησης</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={handleAuthorizationCreate}>
                    <CustomFormSection theme='user-form'>
                        <div className="row">
                            <div className={'col-12 col-lg-6'}>
                                <CustomLabel>
                                    * EMAIL ΣΥΝΕΡΓΑΤΗ
                                </CustomLabel>
                                <CustomSelect
                                    clearable={true}
                                    searchable
                                    minSearch={0}
                                    value={formData.agent_id}
                                    handleChange={(e) => {
                                        setFormData({
                                            ...formData,
                                            agent_id: e
                                        })

                                    }}
                                >
                                    {
                                        selectData?.users?.map((u: any) =>
                                            <SelectItem key={u.id} value={u.id}>{u.email}</SelectItem>)
                                    }

                                </CustomSelect>

                            </div>
                            <div className={'col-12 col-lg-6'}><CustomLabel>
                                * ΕΠΙΛΕΞΤΕ ΥΠΗΡΕΣΙΕΣ
                            </CustomLabel>
                                <CustomSelect
                                    disabled={selectData?.microservices?.length <=1}
                                    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 CreateModal;