import { __makeTemplateObject } from "tslib";
import styled, { css, keyframes } from "styled-components";
import { Padding } from "../../../Pallette/style-utils";
import { ListBaseItemStyled } from "../../styles";
import { LIGHT_THEME } from "../../../Pallette/themes";
import { defaultThemeList } from "../../theme";
import { getTheme } from "../../../utils/theme/getTheme";
var COMPONENT_NAME = "list";
var rotateCollapseIcon = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  \n  to {\n    transform: rotate(180deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  \n  to {\n    transform: rotate(180deg);\n  }\n"])));
var rotateRevertCollapseIcon = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    transform: rotate(180deg);\n  }\n\n  to {\n    transform: rotate(0deg);\n  }\n"], ["\n  from {\n    transform: rotate(180deg);\n  }\n\n  to {\n    transform: rotate(0deg);\n  }\n"])));
export var ListHeaderStyled = styled(ListBaseItemStyled).attrs(function (props) { return ({
    theme: getTheme({
        componentName: COMPONENT_NAME,
        theme: props.theme,
        defaultTheme: defaultThemeList
    })
}); })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  gap: 12px;\n\n  ", ";\n\n  .list-header__trail-content {\n    margin-right: 0;\n    margin-left: auto;\n  }\n\n  .list-header__collapse-icon-wpapper {\n    border-radius: 8px;\n    margin-right: 0;\n    margin-left: auto;\n    /* TODO \u043E\u0431\u0435\u0440\u0442\u043A\u0430 24*24, \u0438\u043A\u043E\u043D\u043A\u0430 12*12 => \u043D\u0443\u0436\u0435\u043D padding 6px, \u0430 SUPER_PIXEL 4px :( */\n    ", "\n  }\n\n  .list-header__collapse-icon {\n    animation: ", "\n      0.3s both 1;\n  }\n"], ["\n  gap: 12px;\n\n  ", ";\n\n  .list-header__trail-content {\n    margin-right: 0;\n    margin-left: auto;\n  }\n\n  .list-header__collapse-icon-wpapper {\n    border-radius: 8px;\n    margin-right: 0;\n    margin-left: auto;\n    /* TODO \u043E\u0431\u0435\u0440\u0442\u043A\u0430 24*24, \u0438\u043A\u043E\u043D\u043A\u0430 12*12 => \u043D\u0443\u0436\u0435\u043D padding 6px, \u0430 SUPER_PIXEL 4px :( */\n    ", "\n  }\n\n  .list-header__collapse-icon {\n    animation: ", "\n      0.3s both 1;\n  }\n"])), function (_a) {
    var theme = _a.theme, isSelected = _a.isSelected, isDisabled = _a.isDisabled;
    if (isSelected) {
        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        .list-header__collapse-icon-wpapper {\n          background: ", ";\n          .list-header__collapse-icon {\n            color: ", ";\n          }\n        }\n      "], ["\n        .list-header__collapse-icon-wpapper {\n          background: ", ";\n          .list-header__collapse-icon {\n            color: ", ";\n          }\n        }\n      "])), theme.components[COMPONENT_NAME]
            .backgroundSelectedDropdownIcon, theme.components[COMPONENT_NAME]
            .colorSelectedDropdownIcon);
    }
    else if (isDisabled) {
        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        .list-header__collapse-icon-wpapper {\n          background: ", ";\n          .list-header__collapse-icon {\n            color: ", ";\n          }\n        }\n      "], ["\n        .list-header__collapse-icon-wpapper {\n          background: ", ";\n          .list-header__collapse-icon {\n            color: ", ";\n          }\n        }\n      "])), theme.components[COMPONENT_NAME]
            .backgroundDisabledDropdownIcon, theme.components[COMPONENT_NAME]
            .colorDisabledDropdownIcon);
    }
    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      .list-header__collapse-icon-wpapper {\n        background: ", ";\n        .list-header__collapse-icon {\n          color: ", ";\n        }\n      }\n      :hover {\n        .list-header__collapse-icon-wpapper {\n          background: ", ";\n          .list-header__collapse-icon {\n            color: ", ";\n          }\n        }\n      }\n    "], ["\n      .list-header__collapse-icon-wpapper {\n        background: ", ";\n        .list-header__collapse-icon {\n          color: ", ";\n        }\n      }\n      :hover {\n        .list-header__collapse-icon-wpapper {\n          background: ", ";\n          .list-header__collapse-icon {\n            color: ", ";\n          }\n        }\n      }\n    "])), theme.components[COMPONENT_NAME]
        .backgroundDefaultDropdownIcon, theme.components[COMPONENT_NAME].colorDefaultDropdownIcon, theme.components[COMPONENT_NAME]
        .backgroundHoverDropdownIcon, theme.components[COMPONENT_NAME].colorHoverDropdownIcon);
}, Padding.allSide(1.5), function (_a) {
    var isSelected = _a.isSelected;
    return isSelected ? rotateCollapseIcon : rotateRevertCollapseIcon;
});
ListHeaderStyled.defaultProps = {
    theme: LIGHT_THEME
};
export var IconWrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), Padding.allSide(1));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
