import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import { IconBrokenTick, IconBrokenMinus } from "@greenatom/icons";
import { Shape } from "../Pallette/Shape";
import { BorderRadius } from "../Pallette/style-utils";
import { getTheme } from "../utils/theme/getTheme";
import { LIGHT_THEME } from "../Pallette/themes";
import { defaultThemeCheckBox } from "./theme";
var COMPONENT_NAME = "checkBox";
var getColorText = function (theme, params) {
    if (params.isDisabled) {
        return theme.components.checkBox.colorDisabled;
    }
    else if (params.isChecked || params.isIndeterminate) {
        return theme.components.checkBox.colorChecked;
    }
    return theme.components.checkBox.colorDefault;
};
export var CheckBoxStyled = styled.label.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        componentName: COMPONENT_NAME,
        defaultTheme: defaultThemeCheckBox
    })
}); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: max-content;\n  padding: 4px 4px 4px 0;\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 12px;\n  cursor: pointer;\n\n  ", ";\n\n  .checkbox-icon {\n    pointer-events: none;\n    ", "\n    color: ", ";\n  }\n"], ["\n  width: max-content;\n  padding: 4px 4px 4px 0;\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 12px;\n  cursor: pointer;\n\n  ", ";\n\n  .checkbox-icon {\n    pointer-events: none;\n    ", "\n    color: ", ";\n  }\n"])), function (_a) {
    var theme = _a.theme, isDisabled = _a.isDisabled, isIndeterminate = _a.isIndeterminate, isChecked = _a.isChecked;
    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", ";\n    color: ", ";\n\n    :hover {\n      ", "\n    }\n  "], ["\n    ", ";\n    color: ", ";\n\n    :hover {\n      ", "\n    }\n  "])), isDisabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      pointer-events: unset;\n      cursor: not-allowed;\n    "], ["\n      pointer-events: unset;\n      cursor: not-allowed;\n    "]))), getColorText(theme, { isDisabled: isDisabled, isIndeterminate: isIndeterminate, isChecked: isChecked }), !isIndeterminate &&
        !isChecked &&
        !isDisabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), theme.components.checkBox.colorHover));
}, function (_a) {
    var isDisabled = _a.isDisabled;
    return isDisabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        cursor: not-allowed;\n      "], ["\n        cursor: not-allowed;\n      "])));
}, function (_a) {
    var theme = _a.theme, isDisabled = _a.isDisabled;
    return isDisabled
        ? theme.components.checkBox.iconDisabledChecked
        : theme.components.checkBox.iconChecked;
});
export var InputStyled = styled.input.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        componentName: COMPONENT_NAME,
        defaultTheme: defaultThemeCheckBox
    })
}); })(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  width: 24px;\n  height: 24px;\n  position: relative;\n  align-items: center;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  :before {\n    content: \"\";\n    width: 24px;\n    height: 24px;\n    position: absolute;\n    z-index: 1;\n    ", ";\n  }\n\n  :hover {\n    :before {\n      ", "\n    }\n  }\n\n  ", "\n\n  &:disabled {\n    cursor: not-allowed;\n    :before {\n      background: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  width: 24px;\n  height: 24px;\n  position: relative;\n  align-items: center;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n  :before {\n    content: \"\";\n    width: 24px;\n    height: 24px;\n    position: absolute;\n    z-index: 1;\n    ", ";\n  }\n\n  :hover {\n    :before {\n      ", "\n    }\n  }\n\n  ", "\n\n  &:disabled {\n    cursor: not-allowed;\n    :before {\n      background: ", ";\n    }\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", ";\n      ", ";\n    "], ["\n      background: ", ";\n      ", ";\n    "])), theme.components.checkBox.backgroundDefault, BorderRadius.roundBorder(Shape.borderRadiusDefault));
}, function (_a) {
    var theme = _a.theme, isIndeterminate = _a.isIndeterminate, isChecked = _a.isChecked;
    return !isIndeterminate &&
        !isChecked && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          background: ", ";\n        "], ["\n          background: ", ";\n        "])), theme.components.checkBox.backgroundHover);
}, function (_a) {
    var isChecked = _a.isChecked, theme = _a.theme;
    return isChecked && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      :before {\n        background: ", ";\n      }\n    "], ["\n      :before {\n        background: ", ";\n      }\n    "])), theme.components.checkBox.backgroundChecked);
}, function (_a) {
    var theme = _a.theme;
    return theme.components.checkBox.backgroundDisabled;
});
export var IconStyles = css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  cursor: pointer;\n"], ["\n  position: absolute;\n  z-index: 2;\n  cursor: pointer;\n"])));
export var IconBrokenTickStyled = styled(IconBrokenTick)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), IconStyles);
export var IconBrokenMinusStyled = styled(IconBrokenMinus)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), IconStyles);
InputStyled.defaultProps = {
    theme: LIGHT_THEME
};
CheckBoxStyled.defaultProps = {
    theme: LIGHT_THEME
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
