import AddStudentsApp from "@components/AddStudentApp";
import { SelectSignerApp } from "@components/SelectSignerApp";
import React, { useCallback } from "react";
import { Button, Col, Form, Modal, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import {
    BorderSeparatorApp,
    IconApp,
    InputApp,
    LabelApp,
    ModalApp,
    SelectSearchApp,
} from "@components";
import { InputTimeRange } from "@components/InputTimeRange";
import {
    OPTIONS_ACADEMIC_CERTIFICATE_TYPES_UCA,
    OPTIONS_ACADEMIC_CERTIFICATE_TYPES_UCG,
} from "@components/Options/users/academicCertificates/OptionsAcademicCertificateTypes";
import Validate from "@helpers/Validate";
import { useForm } from "@hooks/useForm";
import {
    closeModal,
    startCreateAcademicCertificate,
} from "@redux/slices/users/AcademicCertificates";
import { CertificateApprovalModality } from "./CertificateApprovalModality";
import { CertificateBack } from "./CertificateBack";
import { CertificateCurriculumCode } from "./CertificateCurriculumCode";
import { CertificateJudges } from "./CertificateJudges";
import { CertificateSide } from "./CertificateSide";
import { CertificateTitle } from "./CertificateTitle";

const defaultValues = {
    academic_record: null,
    certificate_number: null,
    certificate_type: null,

    certificate_date: null,
    certificate_time: "12:00",
    certificate_signer: "12:00",

    title: null,
    approval_modality: null,
    curriculum_code: null,

    //* Jurado

    judge_1: null,
    judge_2: null,
    judge_3: null,

    secretary: null,
    chair_person: null,
    member: null,

    //* Lateral de la hoja

    side_record_num: null,
    side_book_num: null,
    side_page_num: null,
    side_date: null,
    side_file_num: null,
    side_folio: null,

    //* Reverso de la hoja

    back_book_num: null,
    back_page_num: null,
    back_record_num: null,
    back_date: null,
    back_charge: "Director general de incorporación y servicios escolares",
    back_charge_person: "Marco Arturo Castro Aguilera",

    //* datos de prueba _______________________________________________________

    // academic_record: null,
    // certificate_number: "test",
    // certificate_type: 'Acta de grado',

    // certificate_date: "2024-12-16",
    // certificate_time: "12:00",

    // title: "Licenciada en odontologia",
    // approval_modality: "Examen general de conocimientos",
    // curriculum_code: "222222",

    // //* Jurado

    // judge_1: "Dra. Laura Gabriela González Román",
    // judge_2: "Dra. Elba Graciela Puga Martínez",
    // judge_3: "Dra. Tatiana Margarita Ortega Arrieta",

    // secretary: "Dra. Laura Gabriela González Román",
    // chair_person: "Dra. Elba Graciela Puga Martínez",
    // member: "Dra. Tatiana Margarita Ortega Arrieta",

    // //* Lateral de la hoja

    // side_record_num: "123",
    // side_book_num: "123",
    // side_page_num: "123",
    // side_date: "2024-1-1",
    // side_file_num: "123",
    // side_folio: "123",

    // //* Reverso de la hoja

    // back_book_num: "123",
    // back_page_num: "123",
    // back_record_num: "123",
    // back_date: "2024-1-1",
    // back_charge: "Director general de incorporación y servicios escolares",
    // back_charge_person: "Marco Arturo Castro Aguilera",

    errors: {},
};

const JUDGE_SYNC_MAP = {
    judge_1: "secretary",
    secretary: "judge_1",
    judge_2: "chair_person",
    chair_person: "judge_2",
    judge_3: "member",
    member: "judge_3",
};
export const AcademicCertificatesForm = ({
    startShowCallback,
    Action = null,
    onOpen = null,
}) => {
    const dispatch = useDispatch();

    const { modal } = useSelector((state) => state.academicCertificates);
    const { tiny_name } = useSelector((state) => state.config);

    const OPTIONS_ACADEMIC_CERTIFICATE_TYPES = ["UCG", "UCSA"].includes(tiny_name)
        ? OPTIONS_ACADEMIC_CERTIFICATE_TYPES_UCG
        : OPTIONS_ACADEMIC_CERTIFICATE_TYPES_UCA;

    const {
        values,
        setInputValue,
        setFormValues,
        handleInputChange,
        setErrors,
    } = useForm(defaultValues);
    const {
        academic_record,
        certificate_number,
        certificate_type,

        certificate_date,
        certificate_time,
        certificate_signer,

        errors,
    } = values;

    const handleInputChangeWithJudgeSync = useCallback(
        (event, path = null) => {
            handleInputChange(event, path);

            if (path) {
                return;
            }

            const sourceField = event?.target?.name;
            const mirrorField = JUDGE_SYNC_MAP[sourceField];

            if (!mirrorField) {
                return;
            }

            setInputValue(mirrorField, event.target.value);
        },
        [handleInputChange, setInputValue],
    );

    const handleClose = () => {
        setFormValues(defaultValues);
        dispatch(closeModal());
    };

    const handleSave = async (e) => {
        e.preventDefault();

        if (await isValidForm()) return;

        if (academic_record) {
            const valuesToPersist = {
                ...values,
                secretary: values.judge_1,
                chair_person: values.judge_2,
                member: values.judge_3,
            };

            //*Validar que tipo de certificado se generara en base al dato seleccionado por el usuario
            switch (values.certificate_type) {
                case "Certificado curricula rígida":
                case "Certificado de estudios totales":
                case "Certificado de estudios parciales":
                case "Acta de examen":
                case "Acta de titulación":
                case "Acta de grado":
                case "Certificado de estudios":
                case "Certificado de Licenciatura":
                case "Certificado de Maestría":
                case "Certificado de Especialidad":
                case "Acta licenciatura":
                case "Acta maestría":
                case "Acta especialidad":
                    dispatch(
                        startCreateAcademicCertificate(
                            {
                                academic_record_id: academic_record.id,
                                ...valuesToPersist,
                            },
                            startShowCallback,
                        ),
                    );
                    break;

                default:
                    "No existe el certificado";
                    break;
            }
        }
    };

    const isValidForm = async () => {
        const validation = await Validate(values, {
            certificate_number: "required",
            certificate_type: "required",
        });

        if (validation.fails()) {
            setErrors(validation.errors.all());
        } else {
            setErrors({});
        }

        return validation.fails();
    };

    const handleCleanAcademicRecord = () => {
        setInputValue("academic_record", defaultValues.academic_record);
    };

    return (
        <>
            <ModalApp
                Action={Action}
                onClickButton={onOpen}
                openModal={modal}
                onCloseModal={handleClose}
                titleModal="Generar certificados"
                backdropClassName
                size="xl"
            >
                <Form onSubmit={handleSave}>
                    <Modal.Body>
                        <Row>
                            <Col md={12}>
                                {academic_record ? (
                                    <div>
                                        <LabelApp
                                            title={"Alumno"}
                                            value={" "}
                                        />
                                        <div className="d-flex align-items-center">
                                            <a
                                                href={`/app/students/form/${academic_record?.student_number}`}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="fs-5 m-0"
                                            >
                                                {academic_record.username || ""}
                                            </a>
                                            <IconApp
                                                iconClassName="fa-solid fa-trash fa-xl ms-2"
                                                color={"red"}
                                                isClickable
                                                onClick={
                                                    handleCleanAcademicRecord
                                                }
                                            />
                                        </div>
                                    </div>
                                ) : (
                                    <AddStudentsApp
                                        classNameContainerButton={
                                            "d-flex justify-content-start mt-4"
                                        }
                                        classNameButton="w-100 mb-3"
                                        callback={(data) => {
                                            setInputValue(
                                                "academic_record",
                                                data[0],
                                            );
                                        }}
                                        multipleCheck={false}
                                        getAsObject={true}
                                        selectorMode="academic_certificate"
                                        textInButton={"Añadir estudiante"}
                                    />
                                )}
                            </Col>
                            <hr
                                className="my-4"
                                style={{
                                    border: "0.5px solid rgb(34, 69, 135)",
                                }}
                            />
                            <Col md={6}>
                                <InputApp
                                    title="Número de certificado"
                                    name="certificate_number"
                                    type="string"
                                    min={0}
                                    value={certificate_number}
                                    onChange={handleInputChangeWithJudgeSync}
                                    errorText={
                                        errors.certificate_number &&
                                        errors.certificate_number[0]
                                    }
                                    inline
                                />
                            </Col>
                            <Col md={6}>
                                <SelectSearchApp
                                    title="Tipo de certificado"
                                    placeholder="Seleccione certificado..."
                                    multiple={false}
                                    name="certificate_type"
                                    value={certificate_type}
                                    onChange={handleInputChangeWithJudgeSync}
                                    options={OPTIONS_ACADEMIC_CERTIFICATE_TYPES.map(
                                        (opt) => ({
                                            label: opt,
                                            value: opt,
                                        }),
                                    )}
                                    errorText={
                                        errors.certificate_type &&
                                        errors.certificate_type[0]
                                    }
                                    inline
                                />
                            </Col>
                        </Row>

                        <hr
                            className="mt-2"
                            style={{ border: "0.5px dashed rgb(34, 69, 135)" }}
                        />
                        <BorderSeparatorApp
                            title="Datos del certificado"
                            showColon={false}
                            marginTop={"mt-5"}
                            bold
                            center
                        />

                        <div className="px-1">
                            <Row>
                                <Col sm={3}>
                                    <InputApp
                                        title="Fecha"
                                        name="certificate_date"
                                        type="date"
                                        value={certificate_date}
                                        onChange={
                                            handleInputChangeWithJudgeSync
                                        }
                                        errorText={
                                            errors.certificate_date &&
                                            errors.certificate_date[0]
                                        }
                                        inline
                                    />
                                </Col>
                                {[
                                    "Acta de examen",
                                    "Acta de titulación",
                                    "Acta de grado",
                                ].includes(certificate_type) && (
                                    <Col sm={3}>
                                        <InputTimeRange
                                            title="hora"
                                            name="certificate_time"
                                            value={certificate_time}
                                            onChange={
                                                handleInputChangeWithJudgeSync
                                            }
                                            minTime="7:00"
                                            maxTime="22:00"
                                            inline
                                        />
                                    </Col>
                                )}
                                {["Acta de examen"].includes(certificate_type) && (
                                    <Col sm={6}>
                                        <SelectSignerApp
                                            title="Firmante"
                                            placeholder="Seleccione el firmente"
                                            name="certificate_signer"
                                            value={certificate_signer}
                                            onChange={
                                                handleInputChangeWithJudgeSync
                                            }
                                            errorText={
                                                errors.certificate_signer &&
                                                errors.certificate_signer[0]
                                            }
                                            inline
                                        />
                                    </Col>
                                )}
                            </Row>

                            {[
                                "Acta de examen",
                                "Acta de titulación",
                                "Acta de grado",
                            ].includes(certificate_type) && (
                                <CertificateJudges
                                    values={values}
                                    handleInputChange={
                                        handleInputChangeWithJudgeSync
                                    }
                                />
                            )}

                            {[
                                "Acta de examen",
                                "Acta de titulación",
                                "Acta de grado",
                            ].includes(certificate_type) && (
                                <CertificateTitle
                                    values={values}
                                    handleInputChange={
                                        handleInputChangeWithJudgeSync
                                    }
                                />
                            )}

                            {["Acta de titulación", "Acta de grado"].includes(
                                certificate_type,
                            ) && (
                                <CertificateApprovalModality
                                    values={values}
                                    handleInputChange={
                                        handleInputChangeWithJudgeSync
                                    }
                                />
                            )}

                            {["Certificado de estudios"].includes(
                                certificate_type,
                            ) && (
                                <CertificateCurriculumCode
                                    values={values}
                                    handleInputChange={
                                        handleInputChangeWithJudgeSync
                                    }
                                />
                            )}

                            {[
                                "Acta de titulación",
                                "Acta de grado",
                                "Certificado de estudios",
                            ].includes(certificate_type) && (
                                <CertificateSide
                                    values={values}
                                    handleInputChange={
                                        handleInputChangeWithJudgeSync
                                    }
                                />
                            )}

                            {[
                                "Acta de titulación",
                                "Acta de grado",
                                "Certificado de estudios",
                            ].includes(certificate_type) && (
                                <CertificateBack
                                    values={values}
                                    handleInputChange={
                                        handleInputChangeWithJudgeSync
                                    }
                                />
                            )}
                        </div>
                    </Modal.Body>

                    <Modal.Footer className="d-flex justify-content-between w-100">
                        <Button variant="secondary" onClick={handleClose}>
                            Cerrar
                        </Button>

                        <div className="text-end">
                            <Button
                                variant="primary"
                                type="submit"
                                disabled={!academic_record}
                            >
                                Generar
                            </Button>
                            <div className="mt-2">
                                <span className="fw-bold">
                                    Para certificados totales y parciales,
                                    primero descárgalos y luego súbelos por
                                    separado.
                                </span>
                            </div>
                        </div>
                    </Modal.Footer>
                </Form>
            </ModalApp>
        </>
    );
};