import React from "react";
import { create } from "zustand";

export interface FilterData {
    id?: string;
}

interface IFilterStore {
    filter: React.ReactNode;
    visible: boolean;
    title: string;
    filterData: FilterData;
    onFilter: () => void;
    setContent: (item: React.ReactNode) => void;
    setOnFilter: (onFilter: () => void) => void;
    setVisible: (state: boolean) => void;
    setTitle: (title: string) => void;
    setFilterData: (data: FilterData) => void;
    toggle: () => void;
    clear: () => void;
    clearFilterData: () => void;
}

export type FilterState = IFilterStore;

const useFilterStore = create<FilterState>()((set) => ({
    filter: undefined,
    visible: false,
    title: "",
    filterData: {},
    onFilter: () => {},
    setOnFilter: (onFilter: () => void) => set(() => ({ onFilter })),
    setContent: (item: React.ReactNode) => set(() => ({ filter: item })),
    setVisible: (state: boolean) => set(() => ({ visible: state })),
    setTitle: (title: string) => set(() => ({ title: title })),
    setFilterData: (data: FilterData) => set(() => ({ filterData: data })),
    toggle: () => set((state) => ({ visible: !state.visible })),
    clear: () =>
        set(() => ({
            filter: undefined,
            visible: false,
            title: "",
            onFilter: () => {},
            filterData: {},
        })),
    clearFilterData: () => set(() => ({ filterData: {} })),
}));

export { useFilterStore };
