import { CrudApp } from "@components/Crud/CrudApp";
import { IconApp } from "@components/IconApp";
import LinkToStudenFormApp from "@components/LinkToStudenFormApp";
import ModalApp from "@components/ModalApp";
import {
    OptionsGraduationOptionsRequestsDiplomados,
    OptionsGraduationOptionsRequestsStatus,
    OptionsGraduationRequestsPaymentStatus,
} from "@components/Options/OptionsGraduationsRequest";
import { SelectSearchApp } from "@components/SelectSearchApp";
import { formatDateString } from "@helpers/FormatString";
import { useHasPermission } from "@hooks/useHasPermission";
import {
    setActive,
    setOpenForm,
} from "@redux/slices/operators/GraduationOptionsRequests";
import { AddService } from "@views/students/AcademicServices/AddService";
import { Modal as ModalAntd } from "antd";
import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import PaymentDataTable from "../PaymentDataTable";

export default function AllTable({
    values,
    setInputValue = () => {},
    handleInputChange = () => {},
    getBackgroundColorByStatus = () => {},
    getBackgroundColorByPayment = () => {},
    handleSearch = () => {},
}) {
    const dispatch = useDispatch();

    const { pagination } = useSelector(
        (state) => state.graduationOptionsRequests,
    );

    const [selectedPaymentData, setSelectedPaymentData] = useState(null);

    const { hasPermission } = useHasPermission();

    const {
        diplomado_type_1,
        diplomado_type_2,
        status,
        payment_status,
        errors,
    } = values;

    // const handleDelete = (graduation_option_request_id) => {
    //     dispatch(
    //         startDeleteGraduationOptionRequest(
    //             graduation_option_request_id,
    //             handleSearch,
    //         ),
    //     );
    // };

    return (
        <>
            <Row className="mx-1" style={{ marginTop: "35px" }}>
                <div className="filter-checkbox-wrapper content-label-black">
                    <div className="filter-checkbox-group no-gap">
                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={4}>
                            <SelectSearchApp
                                title="Estatus de solicitud"
                                placeholder="Filtrar por estatus de solicitud"
                                name="status"
                                value={status}
                                multiple
                                onChange={handleInputChange}
                                options={OptionsGraduationOptionsRequestsStatus}
                                aboveFooter
                                errorText={errors.status && errors.status[0]}
                            />
                        </Col>

                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={4}>
                            <SelectSearchApp
                                title="Primera opción de diplomado"
                                placeholder="Filtrar por primera opción de diplomado"
                                multiple
                                name="diplomado_type_1"
                                value={diplomado_type_1}
                                onChange={handleInputChange}
                                options={
                                    OptionsGraduationOptionsRequestsDiplomados
                                }
                                aboveFooter
                                errorText={
                                    errors.diplomado_type_1 &&
                                    errors.diplomado_type_1[0]
                                }
                            />
                        </Col>

                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={4}>
                            <SelectSearchApp
                                title="Segunda opción de diplomado"
                                placeholder="Filtrar por segunda opción de diplomado"
                                multiple
                                name="diplomado_type_2"
                                value={diplomado_type_2}
                                onChange={handleInputChange}
                                options={
                                    OptionsGraduationOptionsRequestsDiplomados
                                }
                                aboveFooter
                                errorText={
                                    errors.diplomado_type_2 &&
                                    errors.diplomado_type_2[0]
                                }
                            />
                        </Col>

                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={4}>
                            <SelectSearchApp
                                title="Estatus de pago"
                                placeholder="Filtrar por estatus de pago"
                                multiple
                                name="payment_status"
                                value={payment_status}
                                onChange={handleInputChange}
                                options={OptionsGraduationRequestsPaymentStatus}
                                aboveFooter
                                errorText={
                                    errors.payment_status &&
                                    errors.payment_status[0]
                                }
                            />
                        </Col>
                    </div>
                </div>
            </Row>

            <CrudApp
                crudName="graduation-options-requests-diplomados"
                values={values}
                setInputValue={setInputValue}
                handleInputChange={handleInputChange}
                pagination={pagination}
                tableHeaders={[
                    "Matrícula",
                    "Nombre",
                    "Grado escolar",
                    "Oferta educativa",
                    "Nivel educativo",
                    "Opción de titulación",
                    "Opciones de diplomado",
                    "Fecha de registro",
                    "Estatus de solicitud",
                    "Estatus de pago",
                ]}
                hasActions
            >
                {pagination?.data?.map((data, index) => (
                    <tr
                        key={index}
                        data-graduation_options_request_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 || "--"}
                        </td>

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

                        <td
                            data-th="Nivel educativo"
                            data-center
                            className="align-middle text-center text-size-11 fw-bold"
                        >
                            {data?.curriculum?.level || "--"}
                        </td>

                        <td
                            data-th="Opción de titulación"
                            data-center
                            className="align-middle text-center text-size-11 fw-bold"
                        >
                            {data?.graduation_option || "--"}
                        </td>

                        <td
                            data-th="Opciones de diplomado"
                            className="align-middle text-size-11 fw-bold"
                        >
                            <ol>
                                <li>{data?.diplomado_type_1 || "N/A"}</li>
                                <li>{data?.diplomado_type_2 || "N/A"}</li>
                                {/* <li>{data?.diplomado_type_3 || "N/A"}</li> */}
                            </ol>
                        </td>

                        <td
                            data-th="Fecha de registro"
                            data-center
                            className="align-middle text-center text-size-11 fw-bold no-wrap"
                        >
                            {data?.registration_date ? (
                                <span>
                                    {formatDateString(
                                        data?.registration_date,
                                        false,
                                        false,
                                    )}
                                </span>
                            ) : (
                                "--"
                            )}
                        </td>

                        <td
                            data-th="Estatus de solicitud"
                            data-center
                            className="align-middle text-center text-size-11 fw-bold"
                            style={{
                                backgroundColor: getBackgroundColorByStatus(
                                    data?.status,
                                ),
                                color: "white",
                            }}
                        >
                            <span>{data?.status || ""}</span>
                        </td>

                        <td
                            data-th="Estatus de pago"
                            data-center
                            className="align-middle text-center text-size-11 fw-bold"
                            style={{
                                backgroundColor: getBackgroundColorByPayment(
                                    data?.payment_status,
                                ),
                                color:
                                    data?.payment_status === "N/A"
                                        ? ""
                                        : "white",
                            }}
                        >
                            {data?.payment_status &&
                            data.payment_status !== "N/A" &&
                            ["Diplomado", "Taller de tesis"].includes(
                                data?.graduation_option,
                            ) ? (
                                <div>
                                    <span className="no-wrap">
                                        {data?.payment_status || ""}
                                    </span>

                                    <br />

                                    <span
                                        className="fa-solid fa-circle-info text-size-18 text-white ms-2"
                                        style={{ cursor: "pointer" }}
                                        onClick={() =>
                                            setSelectedPaymentData(data)
                                        }
                                    />
                                </div>
                            ) : data?.payment_status === "N/A" ? (
                                <span>N/A</span>
                            ) : (
                                <span>-</span>
                            )}
                        </td>

                        <td
                            data-th="Acciones"
                            data-center
                            className="align-middle text-center no-wrap"
                        >
                            <IconApp
                                iconClassName="fa fa-list-check text-info"
                                fontSize={"18px"}
                                description="Ver solicitud"
                                isClickable
                                onClick={async () => {
                                    await dispatch(setActive(data));
                                    await dispatch(setOpenForm("main_screen"));
                                }}
                            />

                            {hasPermission(
                                "GRADUATIONS_EAD_REQUESTS_ADD_SERVICES",
                            ) &&
                                data?.graduation_option === "Diplomado" &&
                                data?.status === "Aprobada" &&
                                data?.payment_status !== "PAGADO" && (
                                    <ModalApp
                                        titleModal={
                                            "Registrar servicio para pago de diplomado"
                                        }
                                        size="lg"
                                        backdrop="static"
                                        keyboard={false}
                                        Action={() => (
                                            <IconApp
                                                iconClassName="fa fa-cart-shopping text-green ms-3"
                                                fontSize={"18px"}
                                                description="Vincular a un servicio escolar para pago"
                                                isClickable
                                            />
                                        )}
                                    >
                                        <AddService
                                            academic_record={
                                                data?.academic_record
                                            }
                                            showOnlyDiplomaServices
                                            graduationOptionRequestIdParam={
                                                data?.id
                                            }
                                            callback={handleSearch}
                                        />
                                    </ModalApp>
                                )}

                            {/* <IconApp
                            iconClassName="fa fa-trash text-danger ms-3"
                            fontSize={"17px"}
                            description="Eliminar"
                            isClickable
                            onClick={() => handleDelete(data?.id)}
                        /> */}
                        </td>
                    </tr>
                ))}
            </CrudApp>

            {selectedPaymentData && (
                <ModalAntd
                    open={selectedPaymentData}
                    onCancel={() => setSelectedPaymentData(null)}
                    title={
                        <div className="text-center">
                            <span>{`Estatus de pago - ${selectedPaymentData?.graduation_option}`}</span>
                        </div>
                    }
                    footer={null}
                    width={"80%"}
                    zIndex={2000}
                >
                    <PaymentDataTable
                        payment_status={selectedPaymentData?.payment_status}
                        payment_data={selectedPaymentData?.payment_data}
                        studentNumber={
                            selectedPaymentData?.academic_record?.student_number
                        }
                        studentName={
                            selectedPaymentData?.academic_record?.full_name
                        }
                        registerDate={
                            formatDateString(
                                selectedPaymentData?.created_at,
                                false,
                                false,
                            ) || "--"
                        }
                        getBackgroundColorByPayment={
                            getBackgroundColorByPayment
                        }
                    />
                </ModalAntd>
            )}
        </>
    );
}