import { IconApp } from "@components/IconApp";
import ModalApp from "@components/ModalApp";
import { SelectSearchApp } from "@components/SelectSearchApp";
import { getCurriculumCycles } from "@helpers/curriculumHelper";
import {
    calculateEducationalCredit,
    getCurriculumCreditsPercentages,
} from "@helpers/educationalCreditsHelper";
import { getValuesCycle, orderCyclesPayments } from "@helpers/orderCycles";
import { useForm } from "@hooks/useForm";
import {
    setSimulated,
    startGetSimulated,
} from "@redux/slices/students/billingStatus";
import { startShow as startListCurricula } from "@redux/slices/teachers/v2/curriculaSlice";
import { startShow as startListCycles } from "@redux/slices/teachers/v2/cycleSlice";
import EducationalCreditsConceptsSummary from "@views/operators/educational_credits/EducationalCreditsConceptsSummary";
import EducationalCreditsTableSummary from "@views/operators/educational_credits/EducationalCreditsTableSummary";
import { Empty } from "antd";
import React, { useEffect, useMemo } from "react";
import { Button, Col, Modal, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import EducationalCreditsHeader from "./EducationalCreditsHeader";

export const CalculatorEducationalCreditsModal = (params) => {
    const { disabled = false } = params;
    return (
        <ModalApp
            titleModal={
                <EducationalCreditsHeader
                    title={"Simulador Programa de Apoyo Universitario"}
                />
            }
            size="xl"
            backdropClassName
            backdrop="static"
            keyboard={false}
            disabled={disabled}
            Action={() => (
                <Button
                    className="btn-app-antara-blue-1"
                    variant="primary"
                    disabled={disabled}
                >
                    <IconApp
                        iconClassName="fa fa-hand-holding-dollar me-2"
                        fontSize="14px"
                    />{" "}
                    <span>Simulador PAU</span>
                </Button>
            )}
        >
            <CalculatorEducationalCreditsForm {...params} />
        </ModalApp>
    );
};

const defaultValues = {
    credit_percentage: null,
    cycle: null,
    cycle_id: null,
    cycle_payment_id: null,
    curriculum_id: null,
    errors: {},
};

export const CalculatorEducationalCreditsForm = ({
    preset_cycle_id = null,
    preset_curriculum_id = null,
    preset_cycle_payment_id = null,
    currency = "MXN",
    is_inscription = true,
    handleCloseButton = () => {},
}) => {
    const dispatch = useDispatch();
    const { simulated } = useSelector((state) => state.billingStatus);
    const { list: curriculaList } = useSelector((state) => state.curricula);
    const { list: cyclesList } = useSelector((state) => state.cycle);
    const { educational_credit_interest_percentage = 6 } = useSelector(
        (state) => state.config,
    );
    const parsedEducationalCreditInterestPercentage = Number(
        educational_credit_interest_percentage,
    );
    const educationalCreditInterestPercentage = Number.isNaN(
        parsedEducationalCreditInterestPercentage,
    )
        ? 6
        : parsedEducationalCreditInterestPercentage;

    const { values, handleInputChange, setFormValues, setInputValue } =
        useForm(defaultValues);

    const {
        curriculum_id,
        cycle_id,
        cycle,
        cycle_payment_id,
        credit_percentage,
        errors,
    } = values;

    useEffect(() => {
        setFormValues({
            ...defaultValues,
            cycle_id: preset_cycle_id,
            curriculum_id: preset_curriculum_id,
        });
        if (!preset_cycle_id) {
            dispatch(startListCycles({ asList: true }));
        }
        if (curriculaList.length === 0) {
            dispatch(startListCurricula({ asList: true }));
        }
    }, [preset_cycle_id, preset_curriculum_id, preset_cycle_payment_id]);

    useEffect(() => {
        getValuesCycle(cycle, setInputValue);
    }, [cycle]);

    useEffect(() => {
        if (cycle_id && curriculum_id) {
            dispatch(
                startGetSimulated({
                    cycle_id,
                    cycle_payment_id,
                    curriculum_id,
                    currency,
                    is_inscription,
                }),
            );
        } else {
            dispatch(setSimulated(null));
        }
    }, [cycle_id, cycle_payment_id, curriculum_id, currency, is_inscription]);

    const filteredCyclesList = useMemo(() => {
        if (curriculum_id && !preset_curriculum_id) {
            const list = getCurriculumCycles(curriculum_id, cyclesList);
            if (list.length === 0) {
                setInputValue("cycle_id", null);
            }
            return list;
        } else {
            return [];
        }
    }, [curriculum_id]);

    const filteredPercentages = useMemo(() => {
        if (curriculum_id && curriculaList.length > 0) {
            // const curriculum = curriculaList.find(
            //     (c) => c.id === curriculum_id,
            // );
            // const options = getCurriculumCreditsPercentages(
            //     curriculum.is_executive,
            // );
            const options = getCurriculumCreditsPercentages();
            if (!options.some((o) => o.value === credit_percentage)) {
                setInputValue("credit_percentage", null);
            }
            return options;
        } else {
            return [];
        }
    }, [curriculum_id]);

    const handleClose = () => {
        handleCloseButton();
    };

    return (
        <>
            <Modal.Body>
                <Row>
                    {!preset_curriculum_id && (
                        <Col md={12} className="mb-3">
                            <SelectSearchApp
                                title="Oferta educativa"
                                placeholder="Selecciona la oferta educativa"
                                name="curriculum_id"
                                value={curriculum_id}
                                onChange={handleInputChange}
                                options={curriculaList.map((c) => ({
                                    value: c.id,
                                    label: c.full_name,
                                }))}
                                errorText={
                                    errors.curriculum_id &&
                                    errors.curriculum_id[0]
                                }
                                required
                            />
                        </Col>
                    )}
                    {(!preset_curriculum_id || !preset_cycle_payment_id) && (
                        <Col md={6}>
                            <SelectSearchApp
                                title="Ciclo"
                                placeholder="Selecciona el ciclo"
                                name="cycle"
                                value={cycle}
                                required
                                onChange={handleInputChange}
                                options={orderCyclesPayments(
                                    filteredCyclesList,
                                )}
                                errorText={
                                    errors.cycle_id && errors.cycle_id[0]
                                }
                                disabled={!curriculum_id}
                                infoText="Selecciona una oferta educativa para ver los ciclos disponibles."
                            />
                        </Col>
                    )}
                    <Col md={6}>
                        <SelectSearchApp
                            name="credit_percentage"
                            title="Porcentaje del Programa de Apoyo Universitario"
                            placeholder="Selecciona el porcentaje"
                            required
                            value={credit_percentage}
                            options={filteredPercentages}
                            onChange={handleInputChange}
                            errorText={
                                errors.credit_percentage &&
                                errors.credit_percentage[0]
                            }
                            disabled={!curriculum_id}
                            infoText="El apoyo universitario solo aplica para Licenciatura, Maestría y Doctorado."
                        />
                    </Col>
                </Row>
                <Row>
                    <Col xs={12} className="mt-4">
                        <CalculatorEducationalCredits
                            billingStatus={simulated?.data}
                            credit_percentage={credit_percentage}
                            interest_percentage={
                                educationalCreditInterestPercentage
                            }
                        />
                    </Col>
                </Row>
            </Modal.Body>
            <Modal.Footer className="justify-content-start">
                <Button
                    variant="secondary"
                    className="me-2"
                    onClick={handleClose}
                >
                    Cerrar
                </Button>
            </Modal.Footer>
        </>
    );
};

export const CalculatorEducationalCredits = ({
    billingStatus,
    credit_percentage,
    scholarship_percentage = 0,
    interest_percentage = 6,
    showDisclaimer = false,
    ignoreScholarship = false,
    showAsCalculator = true,
    showPrintButton = false,
    handleGoToCalculator = () => {},
}) => {
    const calculations = useMemo(() => {
        return calculateEducationalCredit({
            billingStatus,
            credit_percentage,
            interest_percentage,
        });
    }, [
        billingStatus,
        credit_percentage,
        interest_percentage,
        ignoreScholarship,
    ]);

    return (
        <>
            {calculations.concepts_data?.length > 0 && credit_percentage ? (
                <div>
                    <Row className="d-flex justify-content-center">
                        <Col md={12}>
                            <EducationalCreditsConceptsSummary
                                credit_percentage={credit_percentage}
                                total_credit={calculations.total_credit}
                                interest_percentage={interest_percentage}
                                commision={calculations.commision}
                                scholarship_percentage={scholarship_percentage}
                                ignoreScholarship={ignoreScholarship}
                                total_inscription={
                                    calculations.total_inscription
                                }
                                total_reinscription={
                                    calculations.total_reinscription
                                }
                                total_tuitions={calculations.total_tuitions}
                                total_account_status={
                                    calculations.total_account_status
                                }
                            />
                        </Col>

                        <Col md={12} className="mt-4">
                            <EducationalCreditsTableSummary
                                credit_percentage={credit_percentage}
                                concepts_data={calculations.concepts_data}
                                total_credit_and_comission={
                                    calculations.total_credit_and_comission
                                }
                                total_credit={calculations.total_credit}
                                total_account_status={
                                    calculations.total_account_status
                                }
                                total_general={calculations.total_general}
                                showDisclaimer={showDisclaimer}
                                commision={calculations.commision}
                                showAsCalculator={showAsCalculator}
                                showPrintButton={showPrintButton}
                                handleGoToCalculator={handleGoToCalculator}
                            />
                        </Col>
                    </Row>
                </div>
            ) : (
                <Empty
                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                    description="Sin información de estado de cuenta."
                />
            )}
        </>
    );
};