import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import { LIGHT_THEME } from "../Pallette/themes";
import { getTheme } from "../utils/theme/getTheme";
import { defaultThemeMapObject } from "./themes";
export var StripeStyled = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 2px;\n  width: 12px;\n  transition: all 0.3s;\n  ", "\n\n  bottom: 8px;\n"], ["\n  position: absolute;\n  border-radius: 2px;\n  width: 12px;\n  transition: all 0.3s;\n  ", "\n\n  bottom: 8px;\n"])), function (_a) {
    var isChecked = _a.isChecked;
    if (isChecked) {
        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        height: 2px;\n      "], ["\n        height: 2px;\n      "])));
    }
    else {
        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        height: 0;\n      "], ["\n        height: 0;\n      "])));
    }
});
var COMPONENT_NAME = "mapObject";
export var MapObjectRoot = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeMapObject,
        componentName: COMPONENT_NAME
    }),
    typeColor: props.typeColor.charAt(0).toUpperCase() + props.typeColor.slice(1)
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  border-radius: 8px 8px 8px 0;\n  transition: all 0.4s;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  width: 40px;\n  flex-direction: column;\n  border: none;\n  cursor: pointer;\n  padding: 8px;\n\n  background: ", ";\n  ", ";\n\n  ", "\n"], ["\n  position: relative;\n  border-radius: 8px 8px 8px 0;\n  transition: all 0.4s;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  width: 40px;\n  flex-direction: column;\n  border: none;\n  cursor: pointer;\n  padding: 8px;\n\n  background: ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
    var theme = _a.theme, typeColor = _a.typeColor, isDisabled = _a.isDisabled, isChecked = _a.isChecked;
    if (isDisabled) {
        return theme.components[COMPONENT_NAME].backgroundDisabled;
    }
    else if (isChecked) {
        return theme.components[COMPONENT_NAME]["background" + typeColor + "Selected"];
    }
    else {
        return theme.components[COMPONENT_NAME]["background" + typeColor];
    }
}, function (_a) {
    var theme = _a.theme, typeColor = _a.typeColor, isDisabled = _a.isDisabled;
    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    & ", " {\n      background: ", ";\n    }\n    & svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n\n      ", "\n    }\n  "], ["\n    & ", " {\n      background: ", ";\n    }\n    & svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: ", ";\n\n      ", "\n    }\n  "])), StripeStyled, theme.components[COMPONENT_NAME].iconColor, isDisabled
        ? theme.components[COMPONENT_NAME].iconColorDisabled
        : theme.components[COMPONENT_NAME].iconColor, !isDisabled &&
        theme.components[COMPONENT_NAME]["background" + typeColor + "Hover"], isDisabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        pointer-events: none;\n      "], ["\n        pointer-events: none;\n      "]))));
}, function (_a) {
    var isChecked = _a.isChecked;
    return isChecked && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      height: 42px;\n    "], ["\n      height: 42px;\n    "])));
});
MapObjectRoot.defaultProps = {
    theme: LIGHT_THEME
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
