import React from 'react';
import cloneDeep from 'lodash/cloneDeep';
import first from 'lodash/first';
import find from 'lodash/find';
import findIndex from 'lodash/findIndex';
import isObject from 'lodash/isObject';
import { withCanvasState } from 'redhotmagma-graphics-editor/CanvasInterface/CanvasProvider';
import { withTextEditorState } from 'redhotmagma-graphics-editor/Components/TextEditor/TextEditorStateProvider';
import { Services } from 'App/ServiceLocator';
import { containerConnect } from 'Framework/ComponentContainer';
import {
    createColorData,
    getColorPalettes,
    parseColorData,
    getDesignDataUsedColors,
} from 'App/Reducers/DesignArea/Selectors';
import ColorPalettes from '../Components/ColorPalettes';
import { EventTypes } from 'App/Constant';

const ColorPalettesWithEditorState = withCanvasState(
    withTextEditorState(props => {
        const { textEditorState, colorPalettes, ColorPalettesComponent, ...otherProps } = props;
        const { getStyleValues, formatDoc, updateCurrentStyle, currentStyle, defaultStyle } = textEditorState;
        if (!getStyleValues) {
            return null;
        }

        const selectedObjStyle = cloneDeep(getStyleValues().color);

        if (selectedObjStyle.identifier && !isObject(selectedObjStyle.identifier)) {
            selectedObjStyle.identifier = parseColorData(selectedObjStyle.identifier);
        }
        let color;
        if (selectedObjStyle.identifier.custom) {
            color = selectedObjStyle;
        } else {
            color =
                findIndex(colorPalettes, { identifier: selectedObjStyle.identifier.palette }) === -1 ||
                selectedObjStyle.identifier.color === ''
                    ? defaultStyle.color
                    : selectedObjStyle;
        }

        if (color.identifier && !isObject(color.identifier)) {
            color.identifier = parseColorData(color.identifier);
        }

        const selectedColorData = color && color.identifier ? color.identifier : {};
        const colorPaletteId = selectedColorData.palette
            ? selectedColorData.palette
            : colorPalettes.length > 0 && first(colorPalettes).identifier;
        const [colorPaletteIdentifier, changeColorPaletteIdentifier] = React.useState(colorPaletteId);
        const palette = find(colorPalettes, { identifier: colorPaletteIdentifier }) || { identifier: '' };
        return (
            <ColorPalettesComponent
                boxed
                selectedColor={color}
                colorSelectClick={(value, identifier, paletteIdentifier, custom) => {
                    const color = createColorData(identifier, paletteIdentifier, custom, '#' + value);

                    formatDoc('foreColor', color);
                    updateCurrentStyle({
                        ...currentStyle,
                        color: color,
                    });
                    // Disabling updating all objects if maxColorAmount is 1
                    // Services.designData.setImageAndTextColor(color);
                    Services.analytics.triggerEvent(EventTypes.text_color, identifier);
                }}
                colorPaletteChange={value => {
                    changeColorPaletteIdentifier(value);
                }}
                palette={palette}
                colorPalettes={colorPalettes}
                {...otherProps}
            />
        );
    })
);

const mapStateToProps = state => {
    const colorPalettes = getColorPalettes(state);
    return {
        Component: ColorPalettesWithEditorState,
        ColorPalettesComponent: ColorPalettes,
        colorPalettes,
        colorPalette: colorPalettes.length > 0 ? colorPalettes[0] : null,
        usedColors: getDesignDataUsedColors(state),
    };
};

export default containerConnect(mapStateToProps);
