import { useMemo } from 'react';

import { FunnelPlus } from 'lucide-react';

import { StructureType } from '@/api/types';
import AnyDropdownMenu, { MenuData } from '@/components/AnyDropdownMenu';
import { menuByFilterStructure } from '@/components/CollectionTable/utils';
import { Button } from '@/components/ui/button';
import { MobileFab } from '@/components/ui/mobile';
import { Lang } from '@/lang/Lang';
import useAppConfigStore from '@/stores/appConfig';

type AddFilterButtonProps = {
    onSelect: (structure: StructureType) => void;
    structure: StructureType | null;
}

const AddFilterButton = ({ onSelect, structure }: AddFilterButtonProps) => {


    const menu: MenuData[] = useMemo(() => {

        return menuByFilterStructure({
            onSelect: (val) => {

                onSelect(val);

            }, structure: structure, selectBefore: []
        });
    }, [structure]);


    const isMobile = useAppConfigStore((state) => state.isMobile);

    if (!structure) return null;

    if (isMobile) {
        return <AnyDropdownMenu menu={menu}><MobileFab
            className="fixed left-1/2 bottom-safe-4 transform -translate-x-1/2 z-20"


            icon={<FunnelPlus />}
            text={Lang.key('add')}
            textPosition="after"
        />
        </AnyDropdownMenu>
    }


    return <AnyDropdownMenu menu={menu}>

        <Button

            variant={'outline'}
        ><FunnelPlus /> {Lang.key('add_filter')}</Button>
    </AnyDropdownMenu>
}

export default AddFilterButton;