import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import './styles/ColorsObserver.scss';
import '../../tools/derivedColorsObserver';
import { COLORPICKER } from '../../constants/schemaComponentTypes';


const n = createNamespace('ColorsObserver');

export const ColorsObserver = ({
    settings: {
        primaryColor,
        secondaryColor,
        emphasisColor,
        altEmphasisColor
    }
}) => {
    useEffect(() => {
        document.body.style.setProperty('--primaryColor', primaryColor);
        document.body.style.setProperty('--secondaryColor', secondaryColor);
        document.body.style.setProperty('--emphasisColor', emphasisColor);
        document.body.style.setProperty('--altEmphasisColor', altEmphasisColor);
    }, [primaryColor, secondaryColor, emphasisColor, altEmphasisColor]);
    return (
        <React.Fragment>
            {['primary', 'secondary', 'emphasis', 'alt-emphasis'].map(baseName => (
                <div key={baseName}>
                    <div {...n('item', baseName).props}>
                        {baseName}
                    </div>
                    <div {...n('item', [baseName, `${baseName}-hover`]).props}>
                        {`${baseName} Hover`}
                    </div>
                    <div {...n('item', [baseName, 'disabled']).props}>
                        {`${baseName} Disabled`}
                    </div>
                    <div {...n('item', [baseName, `${baseName}-active`]).props}>
                        {`${baseName} Active`}
                    </div>
                </div>
            ))}
        </React.Fragment>
    );
};


ColorsObserver.schema = () => ({
    name: 'ColorsObserver',
    iconName: '',
    form: {
        primaryColor: {
            title: 'primaryColor.title',
            defaultValue: '#009ddb',
            type: COLORPICKER
        },
        secondaryColor: {
            title: 'secondaryColor.title',
            defaultValue: '#f1f1f1',
            type: COLORPICKER
        },
        emphasisColor: {
            title: 'emphasisColor.title',
            defaultValue: '#35a800',
            type: COLORPICKER
        },
        altEmphasisColor: {
            title: 'altEmphasisColor.title',
            defaultValue: '#FB641B',
            type: COLORPICKER
        }
    }
});

ColorsObserver.propTypes = {
    settings: PropTypes.shape({
        primaryColor: PropTypes.string,
        secondaryColor: PropTypes.string,
        emphasisColor: PropTypes.string,
        altEmphasisColor: PropTypes.string
    })
};
ColorsObserver.defaultProps = {
    settings: {}
};
export default ColorsObserver;
