import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PureComponent } from 'react';
import reactCSS from './helpers/reactcss';
import color from './helpers/color';
import { EditableInput } from './common';
var SketchFileds = (function (_super) {
    __extends(SketchFileds, _super);
    function SketchFileds() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            hexColor: _this.props.hex.replace('#', ''),
        };
        _this.confirmHexChange = function (e) {
            var onChange = _this.props.onChange;
            var hexColor = _this.state.hexColor;
            color.isValidHex(hexColor) &&
                onChange({
                    hex: hexColor,
                    source: 'hex',
                }, e);
        };
        _this.handleHexChange = function (data) {
            _this.setState({
                hexColor: data.hex,
            });
        };
        _this.handleChange = function (data, e) {
            var _a = _this.props, rgb = _a.rgb, hsl = _a.hsl, onChange = _a.onChange;
            if (data.r || data.g || data.b) {
                onChange({
                    r: data.r || rgb.r,
                    g: data.g || rgb.g,
                    b: data.b || rgb.b,
                    a: rgb.a,
                    source: 'rgb',
                }, e);
            }
            else if (data.a) {
                if (data.a < 0) {
                    data.a = 0;
                }
                else if (data.a > 100) {
                    data.a = 100;
                }
                data.a = data.a / 100;
                onChange({
                    h: hsl.h,
                    s: hsl.s,
                    l: hsl.l,
                    a: data.a,
                    source: 'rgb',
                }, e);
            }
        };
        return _this;
    }
    Object.defineProperty(SketchFileds.prototype, "styles", {
        get: function () {
            var showAlpha = this.props.showAlpha;
            return reactCSS({
                default: {
                    fields: {
                        display: 'flex',
                        paddingTop: '4px',
                    },
                    single: {
                        flex: '1',
                        paddingLeft: '6px',
                    },
                    alpha: {
                        flex: '1',
                        paddingLeft: '6px',
                    },
                    double: {
                        flex: '2',
                    },
                    input: {
                        width: '80%',
                        padding: '4px 10% 3px',
                        border: 'none',
                        boxShadow: 'inset 0 0 0 1px #ccc',
                        fontSize: '11px',
                    },
                    label: {
                        display: 'block',
                        textAlign: 'center',
                        fontSize: '11px',
                        color: '#222',
                        paddingTop: '3px',
                        paddingBottom: '4px',
                        textTransform: 'capitalize',
                    },
                },
                showAlpha: {
                    alpha: {
                        display: 'none',
                    },
                },
            }, { showAlpha: !showAlpha });
        },
        enumerable: false,
        configurable: true
    });
    SketchFileds.getDerivedStateFromProps = function (props, state) {
        var hex = props.hex;
        var derivedState = {
            preHex: hex,
            hexColor: state.hexColor,
        };
        if (hex !== state.preHex) {
            var hexFormat = hex.replace('#', '');
            derivedState.hexColor = hexFormat;
        }
        return derivedState;
    };
    SketchFileds.prototype.render = function () {
        var rgb = this.props.rgb;
        var hexColor = this.state.hexColor;
        var styles = this.styles;
        return (_jsxs("div", __assign({ style: styles.fields, "data-zv": 'v10.0.11' }, { children: [_jsx("div", __assign({ style: styles.double, "data-zv": 'v10.0.11' }, { children: _jsx(EditableInput, { style: { input: styles.input, label: styles.label }, label: "hex", value: hexColor, onBlur: this.confirmHexChange, onPressEnter: this.confirmHexChange, onChange: this.handleHexChange }, void 0) }), void 0), _jsx("div", __assign({ style: styles.single, "data-zv": 'v10.0.11' }, { children: _jsx(EditableInput, { style: { input: styles.input, label: styles.label }, label: "r", value: rgb.r, onChange: this.handleChange, dragMax: "255" }, void 0) }), void 0), _jsx("div", __assign({ style: styles.single, "data-zv": 'v10.0.11' }, { children: _jsx(EditableInput, { style: { input: styles.input, label: styles.label }, label: "g", value: rgb.g, onChange: this.handleChange, dragMax: "255" }, void 0) }), void 0), _jsx("div", __assign({ style: styles.single, "data-zv": 'v10.0.11' }, { children: _jsx(EditableInput, { style: { input: styles.input, label: styles.label }, label: "b", value: rgb.b, onChange: this.handleChange, dragMax: "255" }, void 0) }), void 0), _jsx("div", __assign({ style: styles.alpha, "data-zv": 'v10.0.11' }, { children: _jsx(EditableInput, { style: { input: styles.input, label: styles.label }, label: "a", value: Math.round(rgb.a * 100), onChange: this.handleChange, dragMax: "100" }, void 0) }), void 0)] }), void 0));
    };
    return SketchFileds;
}(PureComponent));
export default SketchFileds;
