/**
 * Color picker component
 *
 * @author Dmitry Shelabin
 * @date 2022-03-11
 */

import * as React from 'react';
import {BlockPicker, ColorChangeHandler, RGBColor} from 'react-color';
import {Popover} from '../popover/Popover';
import {PLACEMENT, TRIGGER} from '../../constants';
import {IProps} from '../popover/Popover.types';

export type ColorPickerProps = Pick<IProps, 'target' | 'onVisibleChange' | 'onOpen' | 'onClose' | 'isOpen'> & {
    colorHex?: string;
    onColorChange?: ColorChangeHandler;
};

const defaultColors = [
    '#B80000', '#DB3E00', '#FCCB00', '#008B02',
    '#006B76', '#1273DE', '#004DCF', '#5300EB',
    '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5',
    '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB',
    '#D9E3F0', '#F47373', '#697689', '#37D67A',
    '#2CCCE4', '#555555', '#dce775', '#ff8a65',
    '#ba68c8'
];

export class ColorPicker extends React.Component<ColorPickerProps> {
    static getContrastingColor = (rgb?: RGBColor): string => {
        if (!rgb) {
            return '#000';
        }

        const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;

        return yiq >= 128 ? '#000' : '#fff';
    }

    static hexToRGB = (hex: string): RGBColor | undefined => {
        const hex3 = /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
            hex6 = /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/;

        let match: RegExpExecArray | null,
            result: RGBColor | undefined;

        if ((match = hex6.exec(hex))) {
            result = {
                r: parseInt(match[1], 16),
                g: parseInt(match[2], 16),
                b: parseInt(match[3], 16)
            };
        } else if ((match = hex3.exec(hex))) {
            result = {
                r: parseInt(String(match[1]) + match[1], 16),
                g: parseInt(String(match[2]) + match[2], 16),
                b: parseInt(String(match[3]) + match[3], 16)
            };
        }

        return result;
    }

    override render () {
        const {colorHex, onColorChange, ...props} = this.props;

        return (
            <Popover
                trigger={TRIGGER.CLICK}
                placement={PLACEMENT.BOTTOM_START}
                hasArrow={false}
                hasPaddings={false}
                {...props}
            >
                <BlockPicker
                    color={colorHex}
                    onChangeComplete={onColorChange}
                    colors={defaultColors}
                    width={'172px'}
                    triangle={'hide'}
                    styles={{
                        'default': {
                            head: {
                                height: '55px',
                                borderRadius: '3px 3px 0px 0px'
                            }
                        }
                    }}
                />
            </Popover>
        );
    }
}