import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import Input from "../Input";
import { LIGHT_THEME } from "../Pallette/themes";
import { getTheme } from "../utils/theme/getTheme";
import { defaultThemeInputColor } from "./themes";
export var InputColorComponent = styled(Input)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), function (_a) {
    var isReadonly = _a.isReadonly;
    if (isReadonly) {
        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        div {\n          cursor: default;\n        }\n      "], ["\n        div {\n          cursor: default;\n        }\n      "])));
    }
    return "";
}, function (_a) {
    var isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly;
    return (isDisabled || isReadOnly) && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      button {\n        cursor: not-allowed;\n      }\n    "], ["\n      button {\n        cursor: not-allowed;\n      }\n    "])));
});
export var ColorButton = styled.button.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeInputColor,
        componentName: "inputColor"
    })
}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n  background: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  cursor: pointer;\n"], ["\n  width: 24px;\n  height: 24px;\n  background: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 8px;\n  cursor: pointer;\n"])), function (_a) {
    var color = _a.color;
    return !color || color.length < 7 ? "transparent" : color;
}, function (_a) {
    var color = _a.color, theme = _a.theme;
    if (!color || color.length < 7) {
        return theme.components.inputColor.borderColorButton;
    }
    return color;
});
export var InputColorWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
export var ColorPickerWrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  position: absolute;\n"], ["\n  ", ";\n  position: absolute;\n"])), function (_a) {
    var _b;
    var left = _a.left, top = _a.top, theme = _a.theme;
    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    left: ", "px;\n    top: ", "px;\n    z-index: ", ";\n  "], ["\n    left: ", "px;\n    top: ", "px;\n    z-index: ", ";\n  "])), left, top, (_b = theme.zindex) === null || _b === void 0 ? void 0 : _b.tooltip);
});
ColorButton.defaultProps = {
    theme: LIGHT_THEME
};
ColorPickerWrapper.defaultProps = {
    theme: LIGHT_THEME
};
InputColorComponent.defaultProps = {
    theme: LIGHT_THEME
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
