import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import { size } from "polished";
import { LIGHT_THEME } from "../Pallette/themes";
import { getTheme } from "../utils/theme/getTheme";
import { Padding } from "../Pallette/style-utils";
import { Typography } from "../Pallette/Typography";
import { defaultThemeSwitch } from "./theme";
var COMPONENT_NAME = "switch";
var getColorSwitch = function (options) {
    if (options.isDisabled) {
        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n\n      svg {\n        color: ", ";\n      }\n    "], ["\n      background-color: ", ";\n      color: ", ";\n      pointer-events: none;\n\n      svg {\n        color: ", ";\n      }\n    "])), options.theme.components[COMPONENT_NAME]
            .backgroundDisabled, options.theme.components[COMPONENT_NAME].colorDisabled, options.theme.components[COMPONENT_NAME].colorDisabled);
    }
    else if (options.isChecked || options.isIndeterminate) {
        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n      svg {\n        color: ", ";\n      }\n    "], ["\n      background-color: ", ";\n      color: ", ";\n      svg {\n        color: ", ";\n      }\n    "])), options.theme.components[COMPONENT_NAME]
            .backgroundChecked, options.theme.components[COMPONENT_NAME].colorChecked, options.theme.components[COMPONENT_NAME].colorChecked);
    }
    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    svg {\n      color: ", ";\n    }\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    svg {\n      color: ", ";\n    }\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  "])), options.theme.components[COMPONENT_NAME]
        .backgroundDefault, options.theme.components[COMPONENT_NAME].colorDefault, options.theme.components[COMPONENT_NAME].colorDefault, options.theme.components[COMPONENT_NAME].backgroundHover, options.theme.components[COMPONENT_NAME].colorHover, options.theme.components[COMPONENT_NAME].colorHover);
};
export var SwitchWrapper = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeSwitch,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  border-radius: 16px;\n  ", "\n  cursor: pointer;\n  box-sizing: border-box;\n  ", ";\n\n  .beforeSVG {\n    margin-right: 6px;\n  }\n\n  .afterSVG {\n    margin-left: 6px;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  border-radius: 16px;\n  ", "\n  cursor: pointer;\n  box-sizing: border-box;\n  ", ";\n\n  .beforeSVG {\n    margin-right: 6px;\n  }\n\n  .afterSVG {\n    margin-left: 6px;\n  }\n"])), function (_a) {
    var hasTextOrIcon = _a.hasTextOrIcon, iconBefore = _a.iconBefore, iconAfter = _a.iconAfter, isIndeterminate = _a.isIndeterminate;
    if (isIndeterminate) {
        return Padding.allSide(1.5, 4, 1.5, 4);
    }
    if (hasTextOrIcon && (iconAfter || iconBefore)) {
        return Padding.allSide(1, 1.5, 1, 1);
    }
    return Padding.allSide(1);
}, function (props) { return getColorSwitch(props); });
export var SwitchSlider = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeSwitch,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  object-fit: contain;\n  ", ";\n  display: inline-flex;\n  cursor: pointer;\n  align-items: center;\n  transition: all 0.2s;\n  position: relative;\n  text-align: left;\n\n  &:before {\n    content: \"\";\n    position: relative;\n    display: inline-block;\n    ", ";\n    transition: 0.2s;\n    border-radius: 16px;\n    box-sizing: border-box;\n    background-color: ", ";\n  }\n"], ["\n  object-fit: contain;\n  ", ";\n  display: inline-flex;\n  cursor: pointer;\n  align-items: center;\n  transition: all 0.2s;\n  position: relative;\n  text-align: left;\n\n  &:before {\n    content: \"\";\n    position: relative;\n    display: inline-block;\n    ", ";\n    transition: 0.2s;\n    border-radius: 16px;\n    box-sizing: border-box;\n    background-color: ", ";\n  }\n"])), function (_a) {
    var hasTextOrIcon = _a.hasTextOrIcon;
    return hasTextOrIcon
        ? ""
        : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          width: 36px;\n        "], ["\n          width: 36px;\n        "])));
}, size("16px", "16px"), function (_a) {
    var isDisabled = _a.isDisabled, theme = _a.theme;
    return isDisabled
        ? theme.components[COMPONENT_NAME].backgroundSwitchDisabled
        : theme.components[COMPONENT_NAME].backgroundSwitchDefault;
});
export var SwitchInput = styled.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: none;\n  &:checked + ", " {\n    justify-content: flex-end;\n  }\n"], ["\n  display: none;\n  &:checked + ", " {\n    justify-content: flex-end;\n  }\n"])), SwitchSlider);
export var SwitchSliderIndeterminate = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeSwitch,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  object-fit: contain;\n  display: inline-flex;\n  cursor: pointer;\n  align-items: center;\n  transition: all 0.2s;\n  position: relative;\n  border-radius: 16px;\n  ", ";\n  background-color: ", ";\n"], ["\n  object-fit: contain;\n  display: inline-flex;\n  cursor: pointer;\n  align-items: center;\n  transition: all 0.2s;\n  position: relative;\n  border-radius: 16px;\n  ", ";\n  background-color: ", ";\n"])), size("12px", "12px"), function (_a) {
    var isDisabled = _a.isDisabled, theme = _a.theme;
    return isDisabled
        ? theme.components[COMPONENT_NAME].backgroundSwitchDisabled
        : theme.components[COMPONENT_NAME].backgroundSwitchDefault;
});
export var SwitchComponent = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-family: ", ";\n  display: flex;\n  align-items: center;\n  user-select: none;\n  width: max-content;\n"], ["\n  font-family: ", ";\n  display: flex;\n  align-items: center;\n  user-select: none;\n  width: max-content;\n"])), Typography.fontFamily);
export var TextBefore = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin-right: 8px;\n  margin-left: 4px;\n"], ["\n  margin-right: 8px;\n  margin-left: 4px;\n"])));
export var TextAfter = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin-left: 8px;\n  margin-right: 4px;\n"], ["\n  margin-left: 8px;\n  margin-right: 4px;\n"])));
SwitchWrapper.defaultProps = {
    theme: LIGHT_THEME
};
SwitchSlider.defaultProps = {
    theme: LIGHT_THEME
};
SwitchSliderIndeterminate.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;
