import React from 'react';

import type {DropdownMenuItem} from '@gravity-ui/uikit';
import {ActionTooltip, Button, DropdownMenu, Icon, List} from '@gravity-ui/uikit';
import block from 'bem-cn-lite';
import AutogeneratedPaletteIcon from 'components/AutogeneratedPaletteIcon/AutogeneratedPaletteIcon';
import {i18n} from 'i18n';
import type {ColorPalette} from 'shared';
import {ServiceSettingsQA} from 'shared';

import {DefaultPaletteSelect} from './DefaultPaletteSelect/DefaultPaletteSelect';

import trashIcon from '@gravity-ui/icons/svgs/trash-bin.svg';
import iconPlus from 'ui/assets/icons/plus.svg';

import './ColorPalettesCard.scss';

const b = block('color-palettes-card');

type Props = {
    colorPalettes: ColorPalette[];
    title: string;
    description: string;
    className?: string;
    handleRemoveColorPaletteClick: (colorPalette: ColorPalette) => void;
    handleCreateColorPalette: () => void;
    handleItemClick: (colorPalette: ColorPalette) => void;
    condensed?: boolean;
    qa?: string;
    hasEditRights?: boolean;
    hasDefaultPalette?: boolean;
};

const ColorPalettesCard = ({
    colorPalettes,
    className,
    title,
    description,
    condensed,
    handleCreateColorPalette,
    qa,
    hasEditRights,
    handleRemoveColorPaletteClick,
    handleItemClick,
    hasDefaultPalette,
}: Props) => {
    const hasPalettes = colorPalettes.length > 0;

    const renderPaletteListItem = React.useCallback(
        (colorPalette: ColorPalette) => {
            const items: DropdownMenuItem<unknown>[] = [
                {
                    action: () => {
                        handleRemoveColorPaletteClick(colorPalette);
                    },
                    iconStart: <Icon size={16} data={trashIcon} />,
                    text: i18n('component.color-palette-editor', 'label_delete-palette'),
                    theme: 'danger',
                },
            ];

            return (
                <div className={b('list-item')}>
                    <div
                        className={b('list-item-content')}
                        onClick={handleItemClick.bind(null, colorPalette)}
                    >
                        <div className={b('palettes-list-item-icon')}>
                            <AutogeneratedPaletteIcon
                                isGradient={colorPalette.isGradient}
                                colors={colorPalette.colors}
                            />
                        </div>
                        {colorPalette.displayName}
                    </div>
                    <div className={b('list-item-actions')}>
                        {hasEditRights && (
                            <DropdownMenu
                                size="s"
                                defaultSwitcherProps={{
                                    view: 'flat-secondary',
                                    size: 's',
                                    width: 'max',
                                }}
                                switcherWrapperClassName={b('more-icon')}
                                items={items}
                            />
                        )}
                    </div>
                </div>
            );
        },
        [handleItemClick, handleRemoveColorPaletteClick, hasEditRights],
    );

    return (
        <div className={b(null, className)} data-qa={qa}>
            <div className={b('description-wrapper')}>
                <div className={b('title')}>{title}</div>
                <div className={b('description')}>{description}</div>
            </div>
            {hasDefaultPalette && (
                <DefaultPaletteSelect disabled={!hasEditRights} colorPalettes={colorPalettes} />
            )}
            {hasPalettes && (
                <List<ColorPalette>
                    className={b('list-items', {condensed})}
                    itemHeight={40}
                    virtualized={false}
                    filterable={false}
                    sortable={false}
                    renderItem={renderPaletteListItem}
                    items={colorPalettes}
                    itemClassName={b('list-item-wrapper')}
                />
            )}

            <ActionTooltip
                title={i18n('component.color-palette-editor', 'tooltip_disabled-due-rights')}
                disabled={hasEditRights}
            >
                <div tabIndex={hasEditRights ? -1 : 0} className={b('tooltip-anchor')}>
                    <Button
                        className={b('add-palette-button', {condensed})}
                        onClick={handleCreateColorPalette}
                        qa={ServiceSettingsQA.AddPaletteButton}
                        disabled={!hasEditRights}
                    >
                        <Icon data={iconPlus} />
                        {i18n('component.color-palette-editor', 'label_add-palette')}
                    </Button>
                </div>
            </ActionTooltip>
        </div>
    );
};
export default ColorPalettesCard;
