import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import { getTheme } from "../utils/theme/getTheme";
import Divider from "../Divider";
import { LIGHT_THEME } from "../Pallette/themes";
import { ZINDEX } from "../Pallette/ZIndex";
import { defaultThemeDropdown } from "./themes";
var COMPONENT_NAME = "dropdown";
var getBorderRadius = function (direction) {
    switch (direction) {
        case "bottomLeft":
            return "0 16px 16px 16px";
        case "bottomRight":
            return "16px 0 16px 16px";
        case "topLeft":
            return "16px 16px 16px 0";
        case "topRight":
            return "16px 16px 0 16px";
        default:
            return "16px";
    }
};
export var DropdownListWrapper = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeDropdown,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", ";\n\n  ", ";\n"], ["\n  ", ";\n  ", ";\n\n  ", ";\n"])), function (_a) {
    var theme = _a.theme, direction = _a.direction;
    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: ", ";\n    ", ";\n    padding: ", ";\n    border-radius: ", ";\n  "], ["\n    background: ", ";\n    ", ";\n    padding: ", ";\n    border-radius: ", ";\n  "])), theme.components[COMPONENT_NAME].background, theme.shadows.hp.bottom, theme.shape.borderRadiusMedium, getBorderRadius(direction));
}, function (_a) {
    var width = _a.width;
    return width && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), width);
}, function (_a) {
    var top = _a.top, left = _a.left;
    return top &&
        left && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: ", "px;\n      top: ", "px;\n      position: absolute;\n      z-index: ", ";\n    "], ["\n      left: ", "px;\n      top: ", "px;\n      position: absolute;\n      z-index: ", ";\n    "])), left, top, ZINDEX.tooltip);
});
DropdownListWrapper.defaultProps = {
    theme: LIGHT_THEME
};
export var DropdownItemsWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
export var DividerStyled = styled(Divider)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: 16px;\n  margin-top: 16px;\n"], ["\n  margin-bottom: 16px;\n  margin-top: 16px;\n"])));
export var DropdownWrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n"], ["\n  display: inline-block;\n  position: relative;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
