import { useMemo } from 'react';

import {
    Edit3,
    MoreHorizontal,
    Trash2,
} from 'lucide-react';

import AnyDropdownMenu, { MenuData } from '@/components/AnyDropdownMenu';
import { Button } from '@/components/ui/button';
import { Lang } from '@/lang/Lang';
import { cn } from '@/lib/utils';

import { useBoardViewSize } from '../boardViewSize';

function getBoardCardMenu(): MenuData[] {
    return [
        {
            label: Lang.key('edit_field'),
            htmlIcon: <Edit3 className="size-4" />,
            click: () => {},
        },
        {
            label: Lang.key('actions'),
            htmlIcon: <MoreHorizontal className="size-4" />,
            submenu: [
                {
                    label: '—',
                    disabled: true,
                },
            ],
        },
        {
            type: 'separator',
        },
        {
            label: Lang.key('delete'),
            htmlIcon: <Trash2 className="size-4" />,
            click: () => {},
        },
    ];
}

const BoardCardActions = () => {
    const tokens = useBoardViewSize();
    const menu = useMemo(() => getBoardCardMenu(), []);

    if (tokens?.actionsLayout === 'absoluteOverlay') {
        return (
            <div className={cn('absolute z-10', tokens.actionsOverlayOffset)}>
                <AnyDropdownMenu menu={menu}>
                    <Button
                        variant="outline"
                        size={tokens.actionButtonSize}
                        type="button"
                        aria-label={Lang.key('actions')}
                    >
                        <MoreHorizontal className={tokens.actionIconClass} />
                    </Button>
                </AnyDropdownMenu>
            </div>
        );
    }

    return (
        <div className={cn(
            'border-t bg-muted/30',
            tokens?.actionsPadding,
        )}>
            <AnyDropdownMenu menu={menu} className="block w-full">
                <Button
                    variant="outline"
                    size={tokens?.actionButtonSize ?? 'sm'}
                    type="button"
                    className="w-full"
                    aria-label={Lang.key('actions')}
                >
                    <MoreHorizontal className={tokens?.actionIconClass} />
                    <span>{Lang.key('actions')}</span>
                </Button>
            </AnyDropdownMenu>
        </div>
    );
};

export default BoardCardActions;
