import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import reactCSS from './helpers/reactcss';
import { ColorWrap, Saturation, Hue, Alpha, Checkboard } from './common';
import SketchFields from './SketchFields';
import SketchPresetColors from './SketchPresetColors';
var Sketch = function (_a) {
    var width = _a.width, rgb = _a.rgb, hex = _a.hex, hsv = _a.hsv, hsl = _a.hsl, onChange = _a.onChange, showAlpha = _a.showAlpha, presetColors = _a.presetColors, renderers = _a.renderers, className = _a.className, type = _a.type;
    var styles = reactCSS({
        default: {
            picker: {
                width: width,
                padding: '10px 10px 0',
                boxSizing: 'initial',
                background: '#fff',
                borderRadius: '4px',
                boxShadow: '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)',
            },
            saturation: {
                width: '100%',
                paddingBottom: '75%',
                position: 'relative',
                overflow: 'hidden',
            },
            Saturation: {
                radius: '3px',
                shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
            },
            controls: {
                display: 'flex',
            },
            sliders: {
                padding: '4px 0',
                flex: '1',
            },
            color: {
                width: '24px',
                height: '24px',
                position: 'relative',
                marginTop: '4px',
                marginLeft: '4px',
                borderRadius: '3px',
            },
            activeColor: {
                absolute: '0px 0px 0px 0px',
                borderRadius: '2px',
                background: "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + "," + rgb.a + ")",
                boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
            },
            hue: {
                position: 'relative',
                height: '10px',
                overflow: 'hidden',
            },
            Hue: {
                radius: '2px',
                shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
            },
            alpha: {
                position: 'relative',
                height: '10px',
                marginTop: '4px',
                overflow: 'hidden',
            },
            Alpha: {
                radius: '2px',
                shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
            },
        },
        showAlpha: {
            color: {
                height: '10px',
            },
            hue: {
                height: '10px',
            },
            alpha: {
                display: 'none',
            },
        },
    }, { showAlpha: !showAlpha });
    return (_jsxs("div", __assign({ style: styles.picker, className: className, "data-zv": 'v10.0.11' }, { children: [_jsx("div", __assign({ style: styles.saturation, "data-zv": 'v10.0.11' }, { children: _jsx(Saturation, { style: styles.Saturation, hsl: hsl, hsv: hsv, onChange: onChange }, void 0) }), void 0), _jsxs("div", __assign({ style: styles.controls, className: "flexbox-fix", "data-zv": 'v10.0.11' }, { children: [_jsxs("div", __assign({ style: styles.sliders, "data-zv": 'v10.0.11' }, { children: [_jsx("div", __assign({ style: styles.hue, "data-zv": 'v10.0.11' }, { children: _jsx(Hue, { style: styles.Hue, hsl: hsl, onChange: onChange }, void 0) }), void 0), _jsx("div", __assign({ style: styles.alpha, "data-zv": 'v10.0.11' }, { children: _jsx(Alpha, { style: styles.Alpha, rgb: rgb, hsl: hsl, renderers: renderers, onChange: onChange }, void 0) }), void 0)] }), void 0), _jsxs("div", __assign({ style: styles.color, "data-zv": 'v10.0.11' }, { children: [_jsx(Checkboard, {}, void 0), _jsx("div", { style: styles.activeColor, "data-zv": 'v10.0.11' }, void 0)] }), void 0)] }), void 0), _jsx(SketchFields, { rgb: rgb, hsl: hsl, hex: hex, onChange: onChange, showAlpha: showAlpha }, void 0), _jsx(SketchPresetColors, { colors: presetColors, onClick: onChange, type: type }, void 0)] }), void 0));
};
Sketch.defaultProps = {
    presetColors: [
        '#FFFFFF',
        '#F8F8F8',
        '#F2F2F2',
        '#999999',
        '#444444',
        '#FF4444',
        '#FF6500',
        '#FF884D',
        '#FFCD00',
        '#3FBD00',
        '#3FBC87',
        '#00CD98',
        '#5197FF',
        '#BADCFF',
        '#FFEFB8',
    ],
    width: 200,
    showAlpha: false,
    className: '',
};
var ColorBoard = ColorWrap(Sketch);
export default ColorBoard;
