import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import { size } from "polished";
import { getTheme } from "../utils/theme/getTheme";
import { LIGHT_THEME } from "../Pallette/themes";
import { defaultThemeRadioButton } from "./themes";
var COMPONENT_NAME = "radioButton";
export var Mark = styled.span.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        componentName: COMPONENT_NAME,
        defaultTheme: defaultThemeRadioButton
    })
}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  transform: translateY(-50%);\n  border-radius: 50%;\n  transition: 0.2s;\n  left: 4px;\n  top: 12px;\n\n  ", ";\n\n  ", "\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%) scale(0);\n    border-radius: 50%;\n    transition: all 0.2s;\n    ", "\n    background: ", ";\n  }\n"], ["\n  position: relative;\n  transform: translateY(-50%);\n  border-radius: 50%;\n  transition: 0.2s;\n  left: 4px;\n  top: 12px;\n\n  ", ";\n\n  ", "\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%) scale(0);\n    border-radius: 50%;\n    transition: all 0.2s;\n    ", "\n    background: ", ";\n  }\n"])), size("16px"), function (_a) {
    var theme = _a.theme, isDisabled = _a.isDisabled;
    if (isDisabled) {
        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        background-color: ", ";\n        border: none;\n      "], ["\n        background-color: ", ";\n        border: none;\n      "])), theme.components[COMPONENT_NAME]
            .backgroundDisabled);
    }
    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      outline: solid 1px ", ";\n    "], ["\n      background-color: ", ";\n      outline: solid 1px ", ";\n    "])), theme.components[COMPONENT_NAME].background, theme.components[COMPONENT_NAME].outlineColor);
}, size("8px"), function (_a) {
    var theme = _a.theme, isDisabled = _a.isDisabled;
    return isDisabled
        ? theme.components[COMPONENT_NAME].backgroundDisabled
        : theme.components[COMPONENT_NAME].backgroundChecked;
});
Mark.defaultProps = {
    theme: LIGHT_THEME
};
export var Input = styled.input.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        componentName: COMPONENT_NAME,
        defaultTheme: defaultThemeRadioButton
    })
}); })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n\n  &:focus ~ ", " {\n    ", "\n  }\n\n  &:checked ~ ", " {\n    border: none;\n    ", "\n  }\n\n  &:checked ~ ", ":after {\n    transform: translate(-50%, -50%) scale(1);\n  }\n"], ["\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n\n  &:focus ~ ", " {\n    ", "\n  }\n\n  &:checked ~ ", " {\n    border: none;\n    ", "\n  }\n\n  &:checked ~ ", ":after {\n    transform: translate(-50%, -50%) scale(1);\n  }\n"])), Mark, function (_a) {
    var theme = _a.theme, isDisabled = _a.isDisabled;
    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        outline: solid 2px\n          ", ";\n      "], ["\n        outline: solid 2px\n          ", ";\n      "])), isDisabled
        ? theme.components[COMPONENT_NAME].backgroundDisabled
        : theme.components[COMPONENT_NAME].backgroundChecked);
}, Mark, function (_a) {
    var theme = _a.theme, isDisabled = _a.isDisabled;
    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background-color: ", ";\n        outline: solid 2px\n          ", ";\n      "], ["\n        background-color: ", ";\n        outline: solid 2px\n          ", ";\n      "])), theme.components[COMPONENT_NAME].backgroundHover, isDisabled
        ? theme.components[COMPONENT_NAME].backgroundDisabled
        : theme.components[COMPONENT_NAME].backgroundChecked);
}, Mark);
Input.defaultProps = {
    theme: LIGHT_THEME
};
export var RadioButtonComponent = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        componentName: COMPONENT_NAME,
        defaultTheme: defaultThemeRadioButton
    })
}); })(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  font-weight: normal;\n  user-select: none;\n  gap: 18px;\n\n  ", "\n\n  color: ", ";\n\n  ", ";\n\n  &:hover,\n  &:focus {\n    color: ", ";\n\n    ", " {\n      ", "\n    }\n\n    ", ":checked ~ ", " {\n      ", " {\n        ", "\n      }\n    }\n  }\n\n  ", ":checked ~ ", " {\n    ", ";\n  }\n"], ["\n  display: flex;\n  position: relative;\n  font-weight: normal;\n  user-select: none;\n  gap: 18px;\n\n  ", "\n\n  color: ", ";\n\n  ", ";\n\n  &:hover,\n  &:focus {\n    color: ", ";\n\n    ", " {\n      ", "\n    }\n\n    ", ":checked ~ ", " {\n      ", " {\n        ", "\n      }\n    }\n  }\n\n  ", ":checked ~ ", " {\n    ", ";\n  }\n"])), function (_a) {
    var isDisabled = _a.isDisabled;
    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    pointer-events: ", ";\n    min-height: 24px;\n    cursor: ", ";\n  "], ["\n    pointer-events: ", ";\n    min-height: 24px;\n    cursor: ", ";\n  "])), isDisabled ? "none" : "default", isDisabled ? "not-allowed" : "pointer");
}, function (_a) {
    var isDisabled = _a.isDisabled, theme = _a.theme, isChecked = _a.isChecked;
    if (isDisabled) {
        return theme.components[COMPONENT_NAME].colorDisabled;
    }
    if (isChecked) {
        return theme.components[COMPONENT_NAME].colorChecked;
    }
    return theme.components[COMPONENT_NAME].color;
}, function (_a) {
    var isError = _a.isError, theme = _a.theme;
    return isError && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      ", " {\n        border: solid 2px ", ";\n      }\n    "], ["\n      ", " {\n        border: solid 2px ", ";\n      }\n    "])), Mark, theme.components[COMPONENT_NAME].borderColorError);
}, function (_a) {
    var theme = _a.theme;
    return theme.components[COMPONENT_NAME].colorHover;
}, Mark, function (_a) {
    var theme = _a.theme;
    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        background: ", ";\n        outline: solid 2px ", ";\n      "], ["\n        background: ", ";\n        outline: solid 2px ", ";\n      "])), theme.components[COMPONENT_NAME].backgroundHover, theme.components[COMPONENT_NAME].outlineColor);
}, Input, Mark, Mark, function (_a) {
    var theme = _a.theme, isDisabled = _a.isDisabled;
    return !isDisabled && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n            background-color: ", ";\n            outline: solid 2px\n              ", ";\n          "], ["\n            background-color: ", ";\n            outline: solid 2px\n              ", ";\n          "])), theme.components[COMPONENT_NAME]
        .backgroundHover, theme.components[COMPONENT_NAME].outlineColorHover);
}, Input, Mark, function (_a) {
    var theme = _a.theme, isDisabled = _a.isDisabled;
    return !isDisabled && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        background-color: ", ";\n        outline: solid 2px ", ";\n      "], ["\n        background-color: ", ";\n        outline: solid 2px ", ";\n      "])), theme.components[COMPONENT_NAME].backgroundHover, theme.components[COMPONENT_NAME].backgroundChecked);
});
RadioButtonComponent.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;
