import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import DropdownList from "../DropdownList";
import { ZINDEX } from "../../../Pallette/ZIndex";
var MARGIN = 8;
var getDirectionStyles = function (_a) {
    var direction = _a.direction, anchorRect = _a.anchorRect, dropdownRect = _a.dropdownRect;
    switch (direction) {
        case "top":
            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        left: ", "px;\n        top: ", "px;\n      "], ["\n        left: ", "px;\n        top: ", "px;\n      "])), anchorRect.left +
                anchorRect.width / 2 -
                dropdownRect.width / 2, anchorRect.top - MARGIN - dropdownRect.height);
        case "bottom":
            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        top: ", "px;\n        left: ", "px;\n      "], ["\n        top: ", "px;\n        left: ", "px;\n      "])), anchorRect.bottom + MARGIN, anchorRect.left +
                anchorRect.width / 2 -
                dropdownRect.width / 2);
        case "bottomRight":
            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        top: ", "px;\n        left: ", "px;\n      "], ["\n        top: ", "px;\n        left: ", "px;\n      "])), anchorRect.bottom + MARGIN, anchorRect.right - dropdownRect.width);
        case "bottomLeft":
            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        top: ", "px;\n        left: ", "px;\n      "], ["\n        top: ", "px;\n        left: ", "px;\n      "])), anchorRect.bottom + MARGIN, anchorRect.left);
        case "topLeft":
            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        top: ", "px;\n        left: ", "px;\n      "], ["\n        top: ", "px;\n        left: ", "px;\n      "])), anchorRect.top - MARGIN - dropdownRect.height, anchorRect.left);
        case "topRight":
            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        top: ", "px;\n        left: ", "px;\n      "], ["\n        top: ", "px;\n        left: ", "px;\n      "])), anchorRect.top - MARGIN - dropdownRect.height, anchorRect.right - dropdownRect.width);
        case "right":
            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        top: ", "px;\n        left: ", "px;\n      "], ["\n        top: ", "px;\n        left: ", "px;\n      "])), anchorRect.height / 2 -
                dropdownRect.height / 2 +
                anchorRect.top, anchorRect.left + MARGIN + anchorRect.width);
        case "left":
            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        left: ", "px;\n        top: ", "px;\n      "], ["\n        left: ", "px;\n        top: ", "px;\n      "])), anchorRect.left - MARGIN - dropdownRect.width, anchorRect.height / 2 -
                dropdownRect.height / 2 +
                anchorRect.top);
        default:
            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""])));
    }
};
export var DropdownListStyled = styled(DropdownList)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: absolute;\n  overflow-y: auto;\n  max-height: ", "px;\n  height: ", ";\n\n  &.dropdown-transition {\n    &-enter {\n      opacity: 0;\n    }\n    &-enter-done {\n      opacity: 1;\n    }\n    &-exit {\n      opacity: 1;\n    }\n    &-exit-active {\n      opacity: 0;\n    }\n  }\n\n  z-index: ", ";\n  ", ";\n"], ["\n  position: absolute;\n  overflow-y: auto;\n  max-height: ", "px;\n  height: ", ";\n\n  &.dropdown-transition {\n    &-enter {\n      opacity: 0;\n    }\n    &-enter-done {\n      opacity: 1;\n    }\n    &-exit {\n      opacity: 1;\n    }\n    &-exit-active {\n      opacity: 0;\n    }\n  }\n\n  z-index: ", ";\n  ", ";\n"])), function (_a) {
    var maxHeight = _a.maxHeight;
    return maxHeight;
}, function (_a) {
    var height = _a.height;
    return height || "max-content";
}, ZINDEX.tooltip, getDirectionStyles);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
