import { merge } from 'lodash-es';
import { For, mergeProps } from 'solid-js';
import * as color from '../../helpers/color';
import { Raised, useColorPicker, withColorPicker } from '../_common';
import CompactColor from './CompactColor';
import CompactFields from './CompactFields';
export function Compact(_props) {
    const props = mergeProps({
        colors: [
            '#4D4D4D',
            '#999999',
            '#FFFFFF',
            '#F44E3B',
            '#FE9200',
            '#FCDC00',
            '#DBDF00',
            '#A4DD00',
            '#68CCCA',
            '#73D8FF',
            '#AEA1FF',
            '#FDA1FF',
            '#333333',
            '#808080',
            '#cccccc',
            '#D33115',
            '#E27300',
            '#FCC400',
            '#B0BC00',
            '#68BC00',
            '#16A5A5',
            '#009CE0',
            '#7B64FF',
            '#FA28FF',
            '#000000',
            '#666666',
            '#B3B3B3',
            '#9F0500',
            '#C45100',
            '#FB9E00',
            '#808900',
            '#194D33',
            '#0C797D',
            '#0062B1',
            '#653294',
            '#AB149E',
        ],
        styles: {},
        className: '',
    }, _props);
    const { colors: currentColors, changeColor } = useColorPicker();
    const styles = merge({
        Compact: {
            background: '#f6f6f6',
            'border-radius': '4px',
        },
        compact: {
            'padding-top': '5px',
            'padding-left': '5px',
            'box-sizing': 'initial',
            width: '240px',
        },
        clear: {
            clear: 'both',
        },
    }, props.styles);
    const handleChange = (data, e) => {
        if (data.hex) {
            color.isValidHex(data.hex) &&
                changeColor({
                    hex: data.hex,
                    source: 'hex',
                }, e);
        }
        else {
            changeColor(data, e);
        }
    };
    return (<Raised styles={props.styles}>
      <div style={styles.compact} class={`compact-picker ${props.className}`}>
        <div>
          <For each={props.colors}>
            {(c) => (<CompactColor color={c} active={c.toLowerCase() === currentColors().hex} onClick={handleChange}/>)}
          </For>
          <div style={styles.clear}/>
        </div>
        <CompactFields hex={currentColors().hex} rgb={currentColors().rgb} onChange={handleChange}/>
      </div>
    </Raised>);
}
export default withColorPicker(Compact);