import { __makeTemplateObject } from "tslib";
import styled, { keyframes, css } from "styled-components";
import { Margin, Padding } from "../Pallette/style-utils";
import { LIGHT_THEME } from "../Pallette/themes";
import { getTheme } from "../utils/theme/getTheme";
import { defaultThemePreloader } from "./themes";
var spinner = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
var COMPONENT_NAME = "preloader";
export var PreloaderBase = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemePreloader,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n    display: flex;\n    color: ", ";\n    animation: ", " 1s linear infinite;\n  }\n\n  .progressbar {\n    margin-top: ", ";\n    justify-content: center;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  color: ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n    display: flex;\n    color: ", ";\n    animation: ", " 1s linear infinite;\n  }\n\n  .progressbar {\n    margin-top: ", ";\n    justify-content: center;\n    align-items: center;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.components[COMPONENT_NAME].color;
}, Margin.allSide(6, 0), function (_a) {
    var width = _a.width;
    return width && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), width);
}, function (_a) {
    var height = _a.height;
    return height && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      height: ", ";\n    "], ["\n      height: ", ";\n    "])), height);
}, function (_a) {
    var isShowLabel = _a.isShowLabel;
    return (isShowLabel ? "15px" : "20px");
}, function (_a) {
    var isShowLabel = _a.isShowLabel;
    return (isShowLabel ? "19px" : "20px");
}, function (_a) {
    var theme = _a.theme;
    return theme.components[COMPONENT_NAME].background;
}, spinner, function (_a) {
    var isShowLabel = _a.isShowLabel;
    return (isShowLabel ? "0.4px" : "6px");
});
PreloaderBase.defaultProps = {
    theme: LIGHT_THEME
};
export var ProgressBarStyle = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemePreloader,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 40px;\n  height: 2px;\n  display: flex;\n  flex-direction: row;\n  ", ";\n  background: ", ";\n"], ["\n  width: 40px;\n  height: 2px;\n  display: flex;\n  flex-direction: row;\n  ", ";\n  background: ", ";\n"])), Padding.allSide(0), function (_a) {
    var theme = _a.theme;
    return theme.components[COMPONENT_NAME].backgroundProgress;
});
ProgressBarStyle.defaultProps = {
    theme: LIGHT_THEME
};
export var Filler = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemePreloader,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: ", "%;\n  transition: all 0.2s linear;\n  height: 100%;\n  border-radius: 2px;\n  background: ", ";\n"], ["\n  width: ", "%;\n  transition: all 0.2s linear;\n  height: 100%;\n  border-radius: 2px;\n  background: ", ";\n"])), function (_a) {
    var progress = _a.progress;
    return progress;
}, function (_a) {
    var theme = _a.theme;
    return theme.components[COMPONENT_NAME].background;
});
Filler.defaultProps = {
    theme: LIGHT_THEME
};
export var Label = styled.label.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemePreloader,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-weight: 400;\n  line-height: 16px;\n  font-size: 12px;\n  height: 16px;\n  ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ", ";\n  color: ", ";\n"], ["\n  font-weight: 400;\n  line-height: 16px;\n  font-size: 12px;\n  height: 16px;\n  ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ", ";\n  color: ", ";\n"])), Margin.allSide(1, 0.5), Padding.allSide(1), function (_a) {
    var theme = _a.theme;
    return theme.components[COMPONENT_NAME].color;
});
Label.defaultProps = {
    theme: LIGHT_THEME
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
