import BorderSeparatorApp from "@components/BorderSeparatorApp";
import ExportExcelContent from "@components/exportExcel/ExportExcelContent";
import ModalApp from "@components/ModalApp";
import { SelectSearchMainCyclesApp } from "@components/SelectSearchMainCyclesApp";
import {
    CheckBoxApp,
    IconApp,
    InputApp,
} from "@components";
import {
    normalizeChargeBySubjectMassiveRows,
    showChargeBySubjectMassiveRowErrors,
} from "@helpers/chargeBySubjectMassive";
import { orderMainCycles } from "@helpers/orderMainCycles";
import { useForm } from "@hooks/useForm";
import {
    startCreateMassive,
} from "@redux/slices/operators/ChargeBySubjectSlice";
import { startShow as startShowCycles } from "@redux/slices/teachers/v2/cycleSlice";
import React, { useEffect, useState } from "react";
import { Button, Form, Modal, Row, Col } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import Swal from "sweetalert2";

const defaultValues = {
    cycle: null,
    rows: [],
    reject_scholarships: false,
    errors: {},
};

const expectedColumns = [
    {
        key: "matricula",
        label: "Matricula",
        required: true,
    },
    {
        key: "materias",
        label: "Materias",
        required: true,
    },
];

export const AddChargeBySubjectMassive = ({ callback = () => {} }) => (
    <ModalApp
        titleModal={"Importar cobro masivo por materias"}
        size="xl"
        backdrop="static"
        backdropClassName
        keyboard={false}
        Action={() => (
            <Button variant="primary" className="btn-app mb-2">
                <IconApp iconClassName="fa-regular fa-circle-plus me-2" />
                <span>Importar cobro masivo</span>
            </Button>
        )}
    >
        <AddChargeBySubjectMassiveForm callback={callback} />
    </ModalApp>
);

const AddChargeBySubjectMassiveForm = ({
    callback = () => {},
    closeButton = () => {},
    handleCloseButton = () => {},
}) => {
    const dispatch = useDispatch();
    const { user } = useSelector((state) => state.auth);
    const { list: cycles } = useSelector((state) => state.cycle);
    const { values, handleInputChange, setInputValue, reset, setErrors } =
        useForm(defaultValues);
    const [isExcelConfirmed, setIsExcelConfirmed] = useState(false);
    const [confirmedRowsCount, setConfirmedRowsCount] = useState(0);
    const { cycle, rows, reject_scholarships, errors } = values;

    useEffect(() => {
        dispatch(startShowCycles({ asList: true }));
    }, [dispatch]);

    const handleClose = () => {
        setIsExcelConfirmed(false);
        setConfirmedRowsCount(0);
        reset();
        handleCloseButton();
    };

    const handleSave = (event) => {
        event.preventDefault();

        Swal.fire({
            title: "Confirmar accion",
            text: reject_scholarships
                ? "Se rechazaran las becas activas o en proceso que choquen con el cobro por materia. Deseas continuar?"
                : "Se validara toda la configuracion antes de asignar los cobros. Deseas continuar?",
            icon: "info",
            reverseButtons: false,
            showCancelButton: true,
            cancelButtonText: "Cancelar",
            confirmButtonText: "Si, importar",
            confirmButtonColor: "#2e4a6c",
            cancelButtonColor: "#6c757d",
            width: "auto",
            allowEnterKey: false,
            allowOutsideClick: false,
        }).then((result) => {
            if (result.isConfirmed) {
                dispatch(
                    startCreateMassive(values, setErrors, () => {
                        callback();
                        handleClose();
                    }),
                );
            }
        });
    };

    const handleExcelRows = (data) => {
        const { rows: normalizedRows, errors: rowErrors } =
            normalizeChargeBySubjectMassiveRows(data);

        if (rowErrors.length > 0) {
            setInputValue("rows", []);
            setConfirmedRowsCount(0);
            setIsExcelConfirmed(false);
            showChargeBySubjectMassiveRowErrors(
                "Se han detectado errores en el archivo Excel.",
                rowErrors,
            );
            return;
        }

        setInputValue("rows", normalizedRows);
        setConfirmedRowsCount(normalizedRows.length);
        setIsExcelConfirmed(normalizedRows.length > 0);
    };

    return (
        <Form onSubmit={handleSave}>
            <Modal.Body className="pt-3">
                <div className="text-justify">
                    <p className="text-size-14 text-black">
                        Importa cobros por materias usando un archivo Excel con
                        las columnas matricula y materias.
                    </p>
                </div>

                <BorderSeparatorApp
                    title={"Datos de importacion"}
                    marginTop={"mt-4"}
                    marginTopLine={"mt-1"}
                    showColon={false}
                    color={"rgb(35, 96, 146)"}
                />

                <Row style={{ marginTop: "-5px", marginLeft: "1px" }}>
                    <Col md={12}>
                        <SelectSearchMainCyclesApp
                            title="Ciclo"
                            placeholder="Seleccione un ciclo"
                            name="cycle"
                            value={cycle}
                            required
                            onChange={handleInputChange}
                            options={orderMainCycles(cycles, false)}
                            errorText={errors.cycle && errors.cycle[0]}
                        />
                    </Col>
                </Row>

                <BorderSeparatorApp
                    title={"Plantilla Excel"}
                    marginTop={"mt-5"}
                    marginTopLine={"mt-1"}
                    showColon={false}
                    color={"rgb(35, 96, 146)"}
                />

                <div className="text-justify">
                    <p className="text-size-13 text-black">
                        El archivo debe incluir solo matricula y materias. La
                        columna materias debe contener enteros mayores o iguales
                        a 1.
                    </p>
                </div>

                <ExportExcelContent
                    expectedColumns={expectedColumns}
                    downloadFinalExcel={false}
                    textImportButton="Confirmar datos"
                    onFileChange={() => {
                        setInputValue("rows", []);
                        setConfirmedRowsCount(0);
                        setIsExcelConfirmed(false);
                    }}
                    callback={handleExcelRows}
                />

                <Row className="mt-4">
                    <Col md={6}>
                        <InputApp
                            title="Registros listos para importar"
                            value={confirmedRowsCount}
                            disabled
                        />
                    </Col>
                    <Col md={6}>
                        <InputApp
                            title="Usuario que realiza importacion"
                            value={user?.username || ""}
                            disabled
                        />
                    </Col>
                </Row>
                <Row className="mt-3">
                    <Col md={12}>
                        <CheckBoxApp
                            name="reject_scholarships"
                            label="Rechazar becas activas o en proceso y continuar con la importacion"
                            checked={reject_scholarships}
                            onChange={handleInputChange}
                            infoText="Usar solo cuando el cobro por materia debe sustituir la beca del ciclo seleccionado."
                        />
                    </Col>
                </Row>
            </Modal.Body>

            <Modal.Footer className="d-flex justify-content-between w-100">
                {closeButton(handleClose)}

                <Button
                    variant="primary"
                    type="submit"
                    className={`btn-app-primary ${
                        isExcelConfirmed ? "is-confirmed" : ""
                    }`}
                    disabled={!cycle || !isExcelConfirmed || !rows?.length}
                >
                    <span>Importar cobros</span>
                    <IconApp iconClassName="fa fa-save ms-2" />
                </Button>
            </Modal.Footer>
        </Form>
    );
};