var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React from 'react';
import styled, { css } from 'react-emotion';
import chroma from 'chroma-js';
import { TwitterPicker } from 'react-color';
import DropDown from './DropDown';
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
var SquareWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 6px;\n  border: 1px solid #cfcfcf;\n  border-radius: 4px;\n\n  ", ";\n"], ["\n  padding: 6px;\n  border: 1px solid #cfcfcf;\n  border-radius: 4px;\n\n  ",
    ";\n"])), function (props) { return props.isOpen && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border: 1px solid #5d6069;\n  "], ["\n    border: 1px solid #5d6069;\n  "]))); });
var Square = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 21px;\n  height: 21px;\n  border-radius: 2px;\n  cursor: pointer;\n  background-color: ", ";\n"], ["\n  width: 21px;\n  height: 21px;\n  border-radius: 2px;\n  cursor: pointer;\n  background-color: ", ";\n"])), function (props) { return props.color; });
var PickerWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: 7px;\n  & > div {\n    margin-left: 4px;\n  }\n"], ["\n  margin-top: 7px;\n  & > div {\n    margin-left: 4px;\n  }\n"])));
var ColorPicker = /** @class */ (function (_super) {
    __extends(ColorPicker, _super);
    function ColorPicker() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onColorChange = function (color) {
            var _a = _this.props, onChange = _a.onChange, format = _a.format;
            if (onChange) {
                if (format === 'number') {
                    onChange(chroma(color.hex).num());
                }
                else {
                    onChange(color.hex);
                }
            }
        };
        return _this;
    }
    ColorPicker.prototype.render = function () {
        var _a = this.props, color = _a.color, className = _a.className, position = _a.position;
        var colorHex = chroma(color).hex();
        return (React.createElement(Container, { className: className },
            React.createElement(DropDown, { closeOnClick: false },
                function (isOpen) {
                    return React.createElement(SquareWrap, { isOpen: isOpen },
                        React.createElement(Square, { color: colorHex }));
                },
                React.createElement(PickerWrap, null,
                    React.createElement(TwitterPicker, { triangle: position, color: colorHex, onChangeComplete: this.onColorChange })))));
    };
    ColorPicker.defaultProps = {
        format: 'hex',
        color: '#fff',
    };
    return ColorPicker;
}(React.Component));
export default ColorPicker;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=ColorPicker.js.map