import { CrudApp } from "@components/Crud/CrudApp";
import { IconApp } from "@components/IconApp";
import LinkToStudenFormApp from "@components/LinkToStudenFormApp";
import {
    OptionsCategoryProblems,
    OptionsGradesPeriods,
    OptionsStatus,
} from "@components/Options/OptionsEarlyInterventions";
import { DATA as OptionsDegrees } from "@components/Options/students/OptionsDegrees";
import { filterStatusStudent } from "@components/Options/students/OptionsStatus";
import { SelectSearchApp } from "@components/SelectSearchApp";
import { SelectSearchMainCyclesApp } from "@components/SelectSearchMainCyclesApp";
import { StudentStatusIcon } from "@components/StudentStatusIcon";
import { ToolTipCoordinationsListApp } from "@components/ToolTipCoordinationsListApp";
import { orderMainCycles } from "@helpers/orderMainCycles";
import { useForm } from "@hooks/useForm";
import {
    setDataToDispatchReport,
    setOpenModal,
    startShowEarlyInterventions,
} from "@redux/slices/users/EarlyInterventions";
import React, { useEffect } from "react";
import { Badge, Button, Col, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import ModalCase from "../tab_detection/ModalCase";

const defaultValues = {
    page: 1,
    query: "",
    number_rows: 10,
    cycle: null,
    curriculum_id: [],
    degree: [],
    student_status: [],
    period: [],
    status: [],
    category: [],
    errors: {},
};

const statusStyleObject = {
    ABIERTO: { color: "text-blue-2", icon: "fa fa-lock-open me-1" },
    "CASO RESUELTO": { color: "text-green", icon: "fa fa-lock me-1" },
    "CERRADO SIN RESOLVER": {
        color: "text-red",
        icon: "fa fa-lock me-1",
    },
};

export default function TabCases() {
    const dispatch = useDispatch();

    const { user } = useSelector((state) => state.auth);
    const { list: cycleList } = useSelector((state) => state.cycle);
    const { list: curriculaList } = useSelector((state) => state.curricula);
    const { pagination, openModal } = useSelector(
        (state) => state.earlyInterventions,
    );

    const { values, setInputValue, handleInputChange } = useForm(defaultValues);
    const {
        page,
        query,
        number_rows,
        refresh,
        cycle,
        curriculum_id,
        degree,
        student_status,
        period,
        status,
        category,
        errors,
    } = values;

    useEffect(() => {
        handleSearch();
    }, [page, query, number_rows, refresh]);

    const handleSearch = (exportFlag = false) => {
        dispatch(
            startShowEarlyInterventions({
                ...values,
                cycle: cycle?.name,
                exportFlag: Number(exportFlag),
            }),
        );
    };

    return (
        <div>
            <Row className="mt-3">
                <Col xs={12} sm={6} md={4} lg={4} xl={3} xxl={3}>
                    <SelectSearchMainCyclesApp
                        title="Ciclo académico"
                        placeholder="Filtrar por ciclo académico"
                        multiple={false}
                        name="cycle"
                        value={cycle}
                        onChange={handleInputChange}
                        options={orderMainCycles(cycleList)}
                        errorText={errors.cycle && errors.cycle[0]}
                    />
                </Col>

                <Col xs={12} sm={12} md={12} lg={12} xl={9} xxl={9}>
                    <SelectSearchApp
                        title="Oferta educativa"
                        placeholder="Filtrar por oferta educativa"
                        multiple
                        name="curriculum_id"
                        value={curriculum_id}
                        onChange={handleInputChange}
                        options={curriculaList.map((d) => ({
                            value: d.id,
                            label: d.full_name,
                        }))}
                        infoText={
                            <span>
                                Solo podrá ver las pertenecientes a su
                                coordinación{" "}
                                <ToolTipCoordinationsListApp
                                    coordinations={user.coordination}
                                />
                            </span>
                        }
                        errorText={
                            errors.curriculum_id && errors.curriculum_id[0]
                        }
                    />
                </Col>

                <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={3}>
                    <SelectSearchApp
                        title="Grado escolar"
                        placeholder="Filtrar por grado escolar"
                        multiple
                        name="degree"
                        value={degree}
                        onChange={handleInputChange}
                        options={OptionsDegrees}
                        aboveFooter
                        errorText={errors.degree && errors.degree[0]}
                    />
                </Col>

                <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={3}>
                    <SelectSearchApp
                        title="Estatus del alumno"
                        placeholder="Filtrar por estatus del alumno"
                        multiple
                        name="student_status"
                        value={student_status}
                        onChange={handleInputChange}
                        options={filterStatusStudent}
                        errorText={
                            errors.student_status && errors.student_status[0]
                        }
                    />
                </Col>

                <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={3}>
                    <SelectSearchApp
                        title="Periodo"
                        placeholder="Filtrar por periodos"
                        multiple
                        name="period"
                        value={period}
                        onChange={handleInputChange}
                        options={OptionsGradesPeriods}
                        errorText={errors.period && errors.period[0]}
                    />
                </Col>

                <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={3}>
                    <SelectSearchApp
                        title="Estatus"
                        placeholder="Filtrar por estatus"
                        multiple
                        name="status"
                        value={status}
                        onChange={handleInputChange}
                        options={OptionsStatus}
                        errorText={errors.status && errors.status[0]}
                    />
                </Col>

                <Col xs={12} md={12} lg={12} xl={12} xxl={6}>
                    <SelectSearchApp
                        title="Categorías"
                        placeholder="Filtrar por categorías"
                        multiple
                        name="category"
                        value={category}
                        onChange={handleInputChange}
                        options={OptionsCategoryProblems.Categorías}
                        errorText={errors.category && errors.category[0]}
                    />
                </Col>
            </Row>

            <Row className="text-center mt-3 mb-4">
                <Col md={12}>
                    <Button variant="primary" onClick={handleSearch}>
                        Realizar búsqueda
                        <IconApp iconClassName="fa-solid fa-search ms-2" />
                    </Button>
                </Col>
            </Row>

            {pagination?.data?.length > 0 ? (
                <div className="d-flex justify-content-start w-100 mt-3">
                    <Button
                        type="button"
                        className="btn-app-green-with-hover me-4"
                        style={{ border: "none" }}
                        onClick={() => handleSearch(true)}
                    >
                        <IconApp iconClassName="fa fa-file-excel me-2" />
                        Exportar
                    </Button>
                </div>
            ) : null}

            <CrudApp
                crudName="early-interventions-tab-cases"
                values={values}
                setInputValue={setInputValue}
                handleInputChange={handleInputChange}
                pagination={pagination}
                tableHeaders={[
                    "Matrícula",
                    "Nombre",
                    "Grado escolar",
                    "Estatus del alumno",
                    "Oferta educativa",
                    "Ciclo",
                    "Categorías",
                    "Periodo",
                    "Estatus",
                ]}
                hasActions
            >
                {pagination?.data?.map((data, index) => (
                    <tr key={index} data-early_intervention_id={data?.id}>
                        <td
                            data-th="Matrícula"
                            className="align-middle text-center"
                        >
                            {data?.academic_record?.student_number ? (
                                <LinkToStudenFormApp
                                    student_number={
                                        data.academic_record.student_number
                                    }
                                    // showTooltipInfo
                                    // status={data?.status}
                                    // degree={data?.degree_word}
                                    // academic_group={
                                    //     data?.main_group?.name
                                    // }
                                    // coordination={
                                    //     data?.curriculum_coordination
                                    // }
                                />
                            ) : (
                                <span>--</span>
                            )}
                        </td>

                        <td
                            data-th="Nombre"
                            data-center
                            className="align-middle"
                        >
                            {data?.academic_record?.full_name || "--"}
                        </td>

                        <td
                            data-th="Grado escolar"
                            data-center
                            className="align-middle text-center"
                        >
                            {data?.academic_record?.degree_word || "--"}
                        </td>

                        <td
                            data-th="Estatus académico"
                            data-center
                            className="align-middle"
                        >
                            {data?.academic_record?.status ? (
                                <>
                                    <StudentStatusIcon
                                        status={data.academic_record.status}
                                    />
                                    <span className="ms-2">
                                        {data.academic_record.status}
                                    </span>
                                </>
                            ) : (
                                <span>--</span>
                            )}
                        </td>

                        <td
                            data-th="Oferta educativa"
                            data-center
                            className="align-middle"
                        >
                            {data?.academic_record?.curriculum?.rvoe_name ||
                                "--"}
                        </td>

                        <td
                            data-th="Ciclo"
                            data-center
                            className="align-middle"
                        >
                            <strong className="text-size-11">
                                {data?.cycle?.name || "--"}
                            </strong>
                        </td>

                        <td
                            data-th="Categorías"
                            data-center
                            className="align-middle"
                        >
                            <ul>
                                {data?.category
                                    ?.split(",")
                                    ?.map((category, index) => (
                                        <li key={index} className="mt-1">
                                            <Badge
                                                pill
                                                className="badge-students-grades color-blue-2 px-3 pb-2 me-2"
                                            >
                                                <span className="text-size-11">
                                                    {OptionsCategoryProblems.Categorías.find(
                                                        (c) =>
                                                            c.value ===
                                                            category,
                                                    )?.label ?? category}
                                                </span>
                                            </Badge>
                                        </li>
                                    ))}
                            </ul>
                        </td>

                        <td
                            data-th="Periodo"
                            data-center
                            className="align-middle text-center no-wrap"
                        >
                            <strong className="text-size-11">
                                {OptionsGradesPeriods.find(
                                    (p) => p.value === data?.period,
                                )?.label ?? data?.period}
                            </strong>
                        </td>

                        <td
                            data-th="Estatus"
                            data-center
                            className="align-middle text-center"
                        >
                            <div
                                className={
                                    statusStyleObject[data?.status]?.color ??
                                    undefined
                                }
                            >
                                <IconApp
                                    iconClassName={
                                        statusStyleObject[data?.status]?.icon ??
                                        ""
                                    }
                                    fontSize="14px"
                                />
                                <strong className="text-size-11">
                                    {data?.status}
                                </strong>
                            </div>
                        </td>

                        <td
                            data-th="Acciones"
                            data-center
                            className="align-middle text-center"
                        >
                            <IconApp
                                iconClassName={"fa fa-folder-open text-orange"}
                                isClickableF
                                fontSize="20px"
                                onClick={async () => {
                                    await dispatch(
                                        setDataToDispatchReport({
                                            cycleText:
                                                data?.cycle?.year &&
                                                data?.cycle?.sub_cycle
                                                    ? `${data.cycle.year}-${data.cycle.sub_cycle}`
                                                    : null,
                                            curriculum_id:
                                                data?.academic_record
                                                    ?.curriculum_id,
                                            student_number:
                                                data?.academic_record
                                                    ?.student_number,
                                        }),
                                    );

                                    await dispatch(setOpenModal("TabCases"));
                                }}
                            />
                        </td>
                    </tr>
                ))}
            </CrudApp>

            {openModal === "TabCases" && <ModalCase callback={handleSearch} />}
        </div>
    );
}