import { TextObjectFilterResult } from "@models/TextObjectFilter.model";
import style from "./TextObjectFilter.module.css";
import CloseIcon from "@mui/icons-material/Close";
import { HEADER_WIDGETS, useHeaderStore } from "@store/Header.Store";
import { TextObjectModalContent, useTextObjectModalStore } from "@store/TextObjectModal.Store";
import { useEffect, useState } from "react";
import { IconButton } from "@mui/material";

export interface TextObjectFilterProps {
    placeholder: string;
    content: TextObjectModalContent;
    data?: TextObjectFilterResult[];
    endpoint?: string;
    selectedId?: string;
    onChange?: (id: string) => void;
}

export default function TextObjectFilter(props: TextObjectFilterProps): React.ReactElement {
    const { placeholder, content, selectedId = "" } = props;
    const header = useHeaderStore();
    const modal = useTextObjectModalStore();
    const [itemSelected, setItemSelected] = useState<TextObjectFilterResult | undefined>(undefined);
    const [data, setData] = useState<TextObjectFilterResult[] | undefined>(props.data);
    const [endpoint, setEndpoint] = useState<string | undefined>(props.endpoint);

    useEffect(() => {
        setData(props.data);
        buscarIdSeleccionado();
    }, [props.data]);

    useEffect(() => {
        setEndpoint(props.endpoint);
    }, [props.endpoint]);

    useEffect(() => {
        buscarIdSeleccionado();
    }, [selectedId]);

    const buscarIdSeleccionado = () => {
        if (selectedId) {
            if (data) {
                const selected = data.find((item) => item.id == selectedId);
                if (selected) {
                    setItemSelected(selected);
                }
            }
        } else {
            setItemSelected(undefined);
        }
    };

    const handleItemClick = (item: TextObjectFilterResult) => {
        setItemSelected(item);
        header.setActiveWidget(HEADER_WIDGETS.NONE);
        if (props.onChange) {
            props.onChange(item.id);
        }
    };

    const getNameFormatted = (name: string) => {
        const limitLength = 30;
        if (name.length > limitLength) {
            return name.substring(0, limitLength) + "...";
        }
        return name;
    };

    return (
        <>
            <div>
                <div className={style.textObjectFilterLabel}>{placeholder}</div>
            </div>
            <div className={style.textObjectFilter}>
                <div className={style.textObjectFilterItemSelected}>
                    <div
                        style={{ width: "100%" }}
                        onClick={() => {
                            header.setFindText("");
                            modal.setContent(content);
                            if (endpoint) {
                                modal.setEndPoint(endpoint);
                            } else {
                                modal.setEndPoint("");
                            }
                            if (data) {
                                modal.setData(data);
                            } else {
                                modal.setData([]);
                            }
                            modal.setOnSelected(handleItemClick);
                            header.setActiveWidget(HEADER_WIDGETS.FIND);
                        }}
                    >
                        {itemSelected && getNameFormatted(itemSelected.name)}
                        {!itemSelected && <>&nbsp;</>}
                    </div>
                    <IconButton
                        onClick={() => {
                            setItemSelected(undefined);
                            if (props.onChange) {
                                props.onChange("");
                            }
                        }}
                        sx={{ marginRight: "5px" }}
                    >
                        <CloseIcon />
                    </IconButton>
                </div>
            </div>
        </>
    );
}
