"use client";
import classNames from "classnames";
import style from "./TextObjectFilter.module.css";
import CloseIcon from "@mui/icons-material/Close";
import { useHeaderStore, HEADER_WIDGETS } from "@store/Header.Store";
import { useTextObjectModalStore } from "@core/Store/TextObjectModal.Store";
import { useEffect, useState } from "react";
import { TextObjectFilterResult } from "@models/TextObjectFilter.model";
import { PaginateFilterBlockParams } from "@core/Models/Location.model";
import filterObject from "./Filter.Service";
import { EVENT_TYPES, useEventHandlerStore } from "@core/Store/EventHandler.Store";

export default function TextObjectModal() {
    const header = useHeaderStore();
    const modal = useTextObjectModalStore();
    const [results, setResults] = useState<TextObjectFilterResult[]>([]);
    const [filteredResults, setFilteredResults] = useState<TextObjectFilterResult[]>([]);
    const eventHandler = useEventHandlerStore();

    useEffect(() => {
        setResults(modal.data);
        setFilteredResults(modal.data);
    }, [modal.data]);

    useEffect(() => {
        if (!modal.endpoint) {
            if (header.findText == "") {
                setFilteredResults(results);
            }
            setFilteredResults(
                results.filter((result) => {
                    return result.name.toLowerCase().includes(header.findText.toLowerCase());
                })
            );
            return;
        }

        loadFromEndPoint();
    }, [header.findText]);

    useEffect(() => {
        setFilteredResults(results);
    }, [results]);

    const loadFromEndPoint = () => {
        if (eventHandler.eventType === EVENT_TYPES.LOADING) {
            return;
        }
        if (modal.endpoint) {
            eventHandler.setEventType(EVENT_TYPES.LOADING);
            filterObject<PaginateFilterBlockParams>(modal.endpoint, {
                name: header.findText.toLowerCase(),
                page: 1,
                limit: 20,
            })
                .then((res) => {
                    setFilteredResults(res);
                })
                .finally(() => {
                    eventHandler.setEventType(EVENT_TYPES.SLEEP);
                });
        }
    };

    const getClassNames = () => {
        const classList: classNames.ArgumentArray = [];

        classList.push(style.textObjectFilterModal);

        if (header.activeWidget === HEADER_WIDGETS.FIND) {
            classList.push(style.textObjectFilterModalVisible);
        } else {
            classList.push(style.textObjectFilterModalHidden);
        }

        return classNames(classList);
    };

    return (
        <div className={getClassNames()}>
            <div className={style.textObjectFilterModalHeader}>{modal.content.header}</div>
            <div className={style.textObjectFilterModalContent}>
                {filteredResults.map((result, index) => {
                    return modal.content.renderResult(result, index);
                })}
            </div>
            <div className={style.textObjectFilterModalBottom}>{modal.content.bottom}</div>

            <div className={style.textObjectFilterModalCloseButton}>
                <CloseIcon
                    fontSize="medium"
                    color="disabled"
                    className={style.userMenuCloseButton}
                    onClick={() => header.setActiveWidget(HEADER_WIDGETS.NONE)}
                />
            </div>
        </div>
    );
}
