import { Button, Separator, Tooltip, TooltipContent, TooltipTrigger } from "@repo/shadcn-ui/components";
import { CopyPlusIcon, PlusIcon, Trash2Icon } from "lucide-react";
import { useMemo } from 'react';
import { useTranslation } from '../../../i18n';

export const ItemsEditorToolbar = ({
    readOnly,
    selectedIndexes,
    onAdd,
    onDuplicate,
    onMoveUp,
    onMoveDown,
    onRemove,
}: {
    readOnly: boolean;
    selectedIndexes: number[];
    onAdd?: () => void;
    onDuplicate?: () => void;
    onMoveUp?: () => void;
    onMoveDown?: () => void;
    onRemove?: () => void;
}) => {
    const { t } = useTranslation();

    // memoiza valores derivados
    const hasSel = selectedIndexes.length > 0;
    const selectedCount = useMemo(() => selectedIndexes.length, [selectedIndexes]);

    return (
        <nav className="flex items-center justify-between h-12 py-1 px-2 text-muted-foreground bg-muted border-b">
            <div className="flex items-center gap-2">

                {onAdd && (
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={onAdd}
                                disabled={readOnly}
                            >
                                <PlusIcon className="size-4 mr-1" />
                                {t("common.append_empty_row")}
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>{t("common.append_empty_row_tooltip")}</TooltipContent>
                    </Tooltip>
                )}

                {onDuplicate && (
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button
                                type="button"
                                size="sm"
                                variant="outline"
                                onMouseDown={(e) => e.preventDefault()}
                                onClick={onDuplicate}
                                disabled={!hasSel || readOnly}
                            >
                                <CopyPlusIcon className="size-4 sm:mr-2" />
                                <span className="sr-only sm:not-sr-only">
                                    {t("common.duplicate_selected_rows")}
                                </span>
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>{t("common.duplicate_selected_rows_tooltip")}</TooltipContent>
                    </Tooltip>
                )}

                {/*<Separator orientation="vertical" className="mx-2" />

                <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    onMouseDown={(e) => e.preventDefault()}
                    onClick={onMoveUp}
                    disabled={!hasSel || readOnly}
                >
                    {t("common.move_up")}
                </Button>

                <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    onMouseDown={(e) => e.preventDefault()}
                    onClick={onMoveDown}
                    disabled={!hasSel || readOnly}
                >
                    {t("common.move_down")}
                </Button>

                <Separator orientation="vertical" className="mx-2" />
                */}

                {onRemove && (
                    <>
                        <Separator orientation="vertical" className="mx-2" />
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <Button
                                    type="button"
                                    size="sm"
                                    variant="outline"
                                    onMouseDown={(e) => e.preventDefault()}
                                    onClick={onRemove}
                                    disabled={!hasSel || readOnly}
                                    aria-label={t("common.remove_selected_rows")}
                                >
                                    <Trash2Icon className="size-4 sm:mr-2" />
                                    <span className="sr-only sm:not-sr-only">
                                        {t("common.remove_selected_rows")}
                                    </span>
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                                {t("common.remove_selected_rows_tooltip")}
                            </TooltipContent>
                        </Tooltip>
                    </>
                )}
            </div>
            <div className="flex items-center gap-2">
                <p className="text-sm font-normal">
                    {t("common.rows_selected", { count: selectedCount })}
                </p>
            </div>
        </nav>
    );
}