import { CardContainer } from "@components/CardContainer";
import { CrudApp } from "@components/Crud/CrudApp";
import { IconApp } from "@components/IconApp";
import { InputApp } from "@components/InputApp";
import ModalApp from "@components/ModalApp";
import { OptionsGraduationsOptionsTypes } from "@components/Options/OptionsGraduationsRequest";
import { SelectSearchApp } from "@components/SelectSearchApp";
import { formatDateString } from "@helpers/FormatString";
import { useForm } from "@hooks/useForm";
import { useHasPermission } from "@hooks/useHasPermission";
import {
    clearPagination,
    startShowGraduationOptionsRequestsDates,
} from "@redux/slices/operators/GraduationOptionsRequestsDates";
import React, { useEffect } from "react";
import { Button, Col, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import GraduationRequestsDatesForm from "./GraduationRequestsDatesForm";
import GraduationRequestsDatesSyncForm from "./GraduationRequestsDatesSyncForm";

const defaultValues = {
    page: 1,
    query: "",
    number_rows: 25,
    refresh: 0,
    is_open: null,
    start_date: "",
    end_date: "",
    graduation_option_type: "",
    assignment_type: "",
    errors: {},
};

const statusOptions = [
    {
        label: <span className="fw-bold text-green">Abierto</span>,
        value: 1,
    },
    {
        label: <span className="fw-bold text-red">Cerrado</span>,
        value: 0,
    },
];

const assignmentTypeOptions = [
    {
        label: "Asignación general",
        value: "general",
    },
    {
        label: "Solo 1 alumno",
        value: "single",
    },
    {
        label: "Varios alumnos",
        value: "multiple",
    },
];

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

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

    const { hasPermission } = useHasPermission();

    const { values, setInputValue, handleInputChange, setFormValues } =
        useForm(defaultValues);
    const {
        page,
        query,
        number_rows,
        refresh,
        is_open,
        start_date,
        end_date,
        graduation_option_type,
        assignment_type,
        errors,
    } = values;

    useEffect(() => {
        getData();
    }, [
        page,
        query,
        number_rows,
        refresh,
        is_open,
        start_date,
        end_date,
        graduation_option_type,
        assignment_type,
    ]);

    const getData = () => {
        dispatch(startShowGraduationOptionsRequestsDates(values));
    };

    const handleClear = () => {
        setFormValues(
            {
                ...defaultValues,
                refresh: refresh + 1,
            },
            true,
        );
    };

    return (
        <CardContainer title="Fechas de apertura para solicitudes">
            <Row>
                <Col xs={12} sm={12} md={6} lg={6} xl={6} xxl={4}>
                    <SelectSearchApp
                        title="Estatus"
                        placeholder="Filtrar por estatus"
                        type="text"
                        name="is_open"
                        value={is_open}
                        onChange={handleInputChange}
                        options={statusOptions}
                        required
                        errorText={errors.is_open && errors.is_open[0]}
                    />
                </Col>

                <Col xs={12} sm={12} md={6} lg={6} xl={6} xxl={4}>
                    <SelectSearchApp
                        title="Tipo de formulario"
                        placeholder="Filtrar por tipo de formulario"
                        type="text"
                        name="graduation_option_type"
                        value={graduation_option_type}
                        onChange={handleInputChange}
                        options={OptionsGraduationsOptionsTypes}
                        required
                        errorText={
                            errors.graduation_option_type &&
                            errors.graduation_option_type[0]
                        }
                    />
                </Col>

                <Col xs={12} sm={12} md={6} lg={6} xl={6} xxl={4}>
                    <SelectSearchApp
                        title="Tipo de asignación"
                        placeholder="Filtrar por tipo de asignación"
                        type="text"
                        name="assignment_type"
                        value={assignment_type}
                        onChange={handleInputChange}
                        options={assignmentTypeOptions}
                        required
                        errorText={
                            errors.assignment_type && errors.assignment_type[0]
                        }
                    />
                </Col>

                <Col xs={6} sm={6} md={6} lg={6} xl={3} xxl={2}>
                    <InputApp
                        type="date"
                        name="start_date"
                        title="Inicio"
                        value={start_date}
                        onChange={handleInputChange}
                        errorText={errors.start_date && errors.start_date[0]}
                    />
                </Col>

                <Col xs={6} sm={6} md={6} lg={6} xl={3} xxl={2}>
                    <InputApp
                        type="date"
                        name="end_date"
                        title="Término"
                        value={end_date}
                        onChange={handleInputChange}
                        errorText={errors.end_date && errors.end_date[0]}
                    />
                </Col>
            </Row>

            <Row className="text-center mt-2">
                <Col md={12}>
                    {/* <Button className="me-4" onClick={getData}>
                        Realizar búsqueda
                        <IconApp iconClassName="fas fa-search ml-2" />
                    </Button> */}

                    <Button variant="secondary" onClick={handleClear}>
                        Limpiar filtros
                    </Button>
                </Col>

                <hr className="mt-2" />
            </Row>

            {hasPermission("GRADUATIONS_EAD_REQUESTS_DATES_EDIT") && (
                <div>
                    <ModalApp
                        titleModal={"Registrar fecha de apertura"}
                        size="lg"
                        backdrop="static"
                        keyboard={false}
                        Action={() => (
                            <Button className="btn-app" variant="info">
                                <IconApp iconClassName="fa fa-plus me-1" />
                                <span>Registrar fecha</span>
                            </Button>
                        )}
                    >
                        <GraduationRequestsDatesForm callback={getData} />
                    </ModalApp>
                </div>
            )}

            <CrudApp
                crudName="graduation-requests-dates"
                values={values}
                setInputValue={setInputValue}
                handleInputChange={handleInputChange}
                pagination={pagination}
                tableHeaders={[
                    "Folio",
                    "Estatus",
                    "Tipo de formulario",
                    "Inicio",
                    "Término",
                ]}
                hasActions
            >
                {pagination?.data?.map((data, index) => (
                    <tr key={index} id={data?.id}>
                        <td
                            data-th="Folio"
                            data-center
                            className="align-middle text-center"
                        >
                            {`#${data?.id || "-"}`}
                        </td>

                        <td
                            data-th="Estatus"
                            data-center
                            className="align-middle text-center"
                        >
                            <div
                                className={`fw-bold ${
                                    data?.is_open ? "text-green" : "text-red"
                                }`}
                            >
                                <span>
                                    {data?.is_open ? "Abierto" : "Cerrado"}
                                </span>
                            </div>
                        </td>

                        <td
                            data-th="Tipo de formulario"
                            data-center
                            className="align-middle text-center"
                        >
                            {data?.graduation_option_type || "-"}
                        </td>

                        <td
                            data-th="Inicio"
                            data-center
                            className="align-middle text-center"
                        >
                            {formatDateString(data?.start_date) || "-"}
                        </td>

                        <td
                            data-th="Término"
                            data-center
                            className="align-middle text-center"
                        >
                            {formatDateString(data?.end_date) || "-"}
                        </td>

                        <td
                            data-th="Acciones"
                            data-center
                            className="align-middle text-center no-wrap"
                        >
                            {hasPermission(
                                "GRADUATIONS_EAD_REQUESTS_DATES_EDIT",
                            ) && (
                                <ModalApp
                                    titleModal={`Editar fecha de apertura #${data?.id}`}
                                    size="lg"
                                    backdrop="static"
                                    keyboard={false}
                                    Action={() => (
                                        <IconApp
                                            iconClassName="fa fa-edit text-info"
                                            fontSize={"18px"}
                                            description="Editar fecha"
                                            isClickable
                                        />
                                    )}
                                >
                                    <GraduationRequestsDatesForm
                                        active={data}
                                        callback={getData}
                                    />
                                </ModalApp>
                            )}

                            {hasPermission(
                                "GRADUATIONS_EAD_REQUESTS_DATES_EDIT",
                            ) && (
                                <ModalApp
                                    titleModal={`Sincronizar formularios iniciales - #${data?.id}`}
                                    size="md"
                                    backdrop="static"
                                    keyboard={false}
                                    Action={() => (
                                        <IconApp
                                            iconClassName="fa fa-sync text-info ms-3"
                                            fontSize={"18px"}
                                            description="Sincronizar formularios"
                                            isClickable
                                        />
                                    )}
                                >
                                    <GraduationRequestsDatesSyncForm
                                        active={data}
                                        callback={getData}
                                    />
                                </ModalApp>
                            )}
                        </td>
                    </tr>
                ))}
            </CrudApp>
        </CardContainer>
    );
}