import React from 'react';

import {Button} from '@gravity-ui/uikit';
import block from 'bem-cn-lite';
import AutogeneratedPaletteIcon from 'components/AutogeneratedPaletteIcon/AutogeneratedPaletteIcon';
import {i18n} from 'i18n';
import {useDispatch, useSelector} from 'react-redux';
import type {ColorsConfig, Field, GradientType, InternalPaletteId, Palette} from 'shared';
import {fetchColorPalettes} from 'store/actions/colorPaletteEditor';
import {selectColorPalettesDict} from 'store/selectors/colorPaletteEditor';
import {getDefaultColorPalette, getDefaultPaletteLabel} from 'ui/utils';

import {PaletteIcon, PaletteType} from '../../../../../../../components/PaletteIcon/PaletteIcon';
import {openDialogColor} from '../../../../../actions/dialogColor';
import type {ExtraSettings} from '../../../DialogColor/DialogColor';

import './ButtonColorDialog.scss';

type ButtonColorDialogProps = {
    paletteType: PaletteType;
    paletteId: string;
    colorsConfig: ColorsConfig;
    onApplyDialogColor: (config: ColorsConfig) => void;
    field: Field;
    qa?: string;
    disabled?: boolean;
    extraSettings?: ExtraSettings;
};

const b = block('button-color-dialog');

export const ButtonColorDialog: React.FC<ButtonColorDialogProps> = (
    props: ButtonColorDialogProps,
) => {
    const dispatch = useDispatch();
    const colorPalettes = useSelector(selectColorPalettesDict);

    React.useEffect(() => {
        if (!colorPalettes.length) {
            dispatch(fetchColorPalettes());
        }
    }, []);

    const {
        paletteType,
        paletteId,
        onApplyDialogColor,
        field,
        colorsConfig,
        qa,
        disabled,
        extraSettings,
    } = props;

    const colorPalette = colorPalettes[paletteId];
    const defaultColorPalette = getDefaultColorPalette({
        colorPalettes: Object.values(colorPalettes),
    });

    let paletteName: string | JSX.Element;
    if (colorPalette) {
        paletteName = colorPalette.displayName;
    } else if (!paletteId) {
        paletteName = getDefaultPaletteLabel(defaultColorPalette);
    } else if (paletteType === PaletteType.ColorPalette) {
        paletteName = i18n('wizard.palette', `label_${paletteId as InternalPaletteId}`);
    } else {
        paletteName = i18n('wizard', `label_${paletteId as GradientType}`);
    }

    const icon = React.useMemo(() => {
        let customColorPalette = colorPalette;
        if (!customColorPalette && !paletteId && 'colors' in defaultColorPalette) {
            customColorPalette = defaultColorPalette;
        }

        if (customColorPalette) {
            return (
                <AutogeneratedPaletteIcon
                    className={b('icon')}
                    colors={customColorPalette.colors}
                    isGradient={customColorPalette.isGradient}
                />
            );
        }

        const systemColorPalette = defaultColorPalette as Palette;

        return (
            <PaletteIcon
                paletteId={paletteId || systemColorPalette.id}
                paletteType={paletteType}
                className={b('icon')}
            />
        );
    }, [colorPalette, defaultColorPalette, paletteId, paletteType]);

    return (
        <Button
            qa={qa}
            view="outlined"
            disabled={disabled}
            className={b()}
            onClick={() =>
                dispatch(
                    openDialogColor({
                        item: field,
                        colorsConfig,
                        extra: extraSettings,
                        onApply: onApplyDialogColor,
                        isColorModeChangeAvailable: false,
                        canSetNullMode: false,
                    }),
                )
            }
        >
            <span className={b('content-container')}>
                {icon}
                <span>{paletteName}</span>
            </span>
        </Button>
    );
};
