'use client';

import React, { useMemo } from 'react';
import { Button, Checkbox, Dropdown, Space, Typography } from 'antd';
import { Columns3 } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';

export type ListColumnVisibilityOption = { key: string; label: string };

export type ListColumnVisibilityDropdownProps = {
    /** Colunas que o usuário pode mostrar/ocultar (excluir ações fixas). */
    columns: ListColumnVisibilityOption[];
    hiddenKeys: Set<string>;
    onToggle: (key: string) => void;
    onMinimal: () => void;
    onFull: () => void;
};

export function ListColumnVisibilityDropdown({
    columns,
    hiddenKeys,
    onToggle,
    onMinimal,
    onFull,
}: ListColumnVisibilityDropdownProps) {
    const sorted = useMemo(
        () => [...columns].sort((a, b) => a.label.localeCompare(b.label, 'pt')),
        [columns]
    );

    const dropdownRender = () => (
        <div
            className="rounded-md border border-solid border-gray-200 bg-white p-3 shadow-md"
            style={{ minWidth: 260, maxHeight: 360, overflowY: 'auto' }}
            onClick={(e) => e.stopPropagation()}
        >
            <Typography.Text strong className="mb-2 block">
                Colunas visíveis
            </Typography.Text>
            <Space direction="vertical" size={6} className="w-full">
                {sorted.map((col) => (
                    <Checkbox
                        key={col.key}
                        checked={!hiddenKeys.has(col.key)}
                        onChange={() => onToggle(col.key)}
                    >
                        {col.label}
                    </Checkbox>
                ))}
            </Space>
            <div className="mt-3 flex flex-wrap gap-2 border-0 border-t border-solid border-gray-100 pt-3">
                <Button size="small" type="default" onClick={onMinimal}>
                    Mínimo
                </Button>
                <Button size="small" type="link" onClick={onFull} className="px-1">
                    Completo
                </Button>
            </div>
        </div>
    );

    if (columns.length === 0) {
        return null;
    }

    return (
        <Dropdown trigger={['click']} placement="bottomRight" dropdownRender={dropdownRender}>
            <Button type="default" icon={<Columns3 size={ICON_SIZE_MD} aria-hidden />} aria-label="Colunas visíveis">
                Colunas
            </Button>
        </Dropdown>
    );
}