import React, {FormEvent, ReactNode} from "react";
import ReactDOM from "react-dom";
import useAbortController from "../../../hooks/useAbortController";
import CustomTextField from "../../UI/Forms/CustomTextField/CustomTextField";
import {getProtocol} from "../../../API/papyros";
import {useNavigate} from "react-router-dom";
import Protocol from "../../../models/Papyros/Protocol";
import protocolFooterImg from "../../../assets/images/protocol-footer.svg";
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";

type ProtocolFormProps = {
    children?: ReactNode;
    formData: Protocol;
    setFormData: any;
};

const ProtocolForm = ({formData, setFormData}: ProtocolFormProps) => {
    const [isLoading, setIsLoading] = useLoading(true);
    const navigate = useNavigate();

    useAbortController()

    const handleSubmit = async (e: FormEvent) => {

        e.preventDefault();
        setIsLoading(true);


        const res = await getProtocol({
            subject: formData.subject
        })

        setFormData({
            ...formData,
            protocol: res.data.protocol,
        })
        setIsLoading(false);
        navigate("success");
    };
    const isValid = () => {
        return (formData.subject)
    }
    return (
        <div id="Protocol">
            {
                isLoading &&
                ReactDOM.createPortal(
                    <div className="dua-loader-portal">
                        <DuaLoader/>
                    </div>,
                    document.body
                )
            }
            <form onSubmit={handleSubmit}>
                <div className="inner-container">
                    <div className="row">
                        <div className="col-8 d-flex flex-column">
                            <div className="row justify-content-start first-row">
                                <div className="col-auto d-flex flex-grow-1">
                                    <p className="info info-title">
                                        Είδος Πρωτοκόλλου:&nbsp;
                                    </p>
                                    <p className="info info-content">{formData.type}</p>
                                </div>
                                <div className="col-auto d-flex flex-grow-1">
                                    <p className="info info-title">Έτος:&nbsp;</p>
                                    <p className="info info-content">
                                        {formData.year}
                                    </p>
                                </div>
                                <div className="col-auto d-flex">
                                    <p className="info info-title">
                                        Ημερομηνία Πρωτοκόλλησης:&nbsp;
                                    </p>
                                    <p className="info info-content">{formData.date}</p>
                                </div>
                            </div>
                            <div className="row justify-content-start mb-5">
                                <div className="col-12 d-flex align-items-center">
                                    <div className="input-wrapper flex-grow-1">
                                        <CustomFormSection theme={"default"}>
                                            <CustomLabel>
                                                ΘΕΜΑ
                                            </CustomLabel>
                                            <CustomTextField
                                                id={'subject'}
                                                theme={"user-form-field"}
                                                value={formData.subject}
                                                onChange={(s) => {
                                                    setFormData({
                                                        ...formData,
                                                        subject: s,
                                                    });
                                                }}
                                            /></CustomFormSection>
                                    </div>

                                </div>
                            </div>
                            <div className="row justify-content-start last-row">
                                <div className="col-12 d-flex">
                                    <p className="info info-title">
                                        Μονάδα Πρωτοκόλλησης:&nbsp;
                                    </p>
                                    <p className="info info-content">
                                        {formData.unit}.{formData.unitname}
                                    </p>
                                </div>
                            </div>
                            <div className="row justify-content-start mb-5">
                                <div className="col-auto d-flex">
                                    <p className="info info-title">
                                        Πρωτοκολλήθηκε από:&nbsp;
                                    </p>
                                    <p className="info info-content">
                                        {formData.from}
                                    </p>
                                </div>
                                <div className="col-auto d-flex">
                                    <p className="info info-title">Προς:&nbsp;</p>
                                    <p className="info info-content">
                                        {formData.to}
                                    </p>
                                </div>
                            </div>
                            <div className="row justify-content-start">
                                <div className="col-3">
                                    {/*<FormButtonAlt*/}
                                    {/*    isDisabled={!isValid()}*/}
                                    {/*    text='Πρωτοκόλληση'*/}
                                    {/*    buttonType='submit'*/}
                                    {/*    isLoading={isLoading}*/}
                                    {/*/>*/}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div className="protocol-footer-img-container">
                <img src={protocolFooterImg} alt="protocol footer img"></img>
            </div>
        </div>
    );
};
export default ProtocolForm;