import React from 'react';

import {
    TicketMinusIcon,
    TicketPlusIcon,
    TrashIcon,
} from 'lucide-react';

import { HallBeltType } from '@/api/types';
import { Button } from '@/components/ui/button';
import {
    Item,
    ItemActions,
    ItemContent,
    ItemMedia,
    ItemTitle,
} from '@/components/ui/item';
import { Label } from '@/components/ui/label';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { Lang } from '@/lang/Lang';

type Props = {
    belts: HallBeltType[];
    selectedSeatsCount: number;
    onSelectBelt: (beltId: string) => void;
    onAddSelectedToBelt: (belt: HallBeltType) => void;
    onRemoveSelectedFromBelt: (beltId: string) => void;
    onDeleteBelt: (beltId: string) => void;
};

export default function BeltsPanel({
    belts,
    selectedSeatsCount,
    onSelectBelt,
    onAddSelectedToBelt,
    onRemoveSelectedFromBelt,
    onDeleteBelt,
}: Props) {
    const disabled = selectedSeatsCount === 0;

    return (
        <div>
            <Label>{Lang.key('belts')}</Label>

            {belts.length === 0 && (
                <div className="text-xs text-slate-400">{Lang.key('no_belts')}</div>
            )}

            {belts.map((belt) => {

                return <Item variant="outline">
                    <ItemMedia>
                        <div
                            className="w-3 h-3 rounded-sm"
                            style={{ backgroundColor: belt.color }}
                        ></div>
                    </ItemMedia>
                    <ItemContent>
                        <ItemTitle>{belt.name}</ItemTitle>

                    </ItemContent>
                    <ItemActions>
                        <Tooltip>
                            <TooltipTrigger asChild>

                                <Button
                                    onClick={() => onAddSelectedToBelt(belt)}
                                    variant="outline" size="sm">
                                    <TicketPlusIcon />
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>{Lang.key('add_selected_to_belt')}</p>
                            </TooltipContent>
                        </Tooltip>

                        <Tooltip>
                            <TooltipTrigger asChild>
                                <Button
                                    onClick={() => onRemoveSelectedFromBelt(belt.id)}
                                    variant="outline" size="sm">
                                    <TicketMinusIcon />
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>{Lang.key('remove_selected_from_belt')}</p>
                            </TooltipContent>
                        </Tooltip>
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <Button
                                    onClick={() => onDeleteBelt(belt.id)}
                                    variant="destructive" size="sm">
                                    <TrashIcon />
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>{Lang.key('delete_belt')}</p>
                            </TooltipContent>
                        </Tooltip>

                    </ItemActions>
                </Item>


            })}


        </div>
    );
}

