import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import InputBase from "../InputBase";
import { corvusOnest } from "../Pallette/fonts";
import { LIGHT_THEME } from "../Pallette/themes";
import { getTheme } from "../utils/theme/getTheme";
import { defaultThemeTextArea } from "./themes";
export var COMPONENT_NAME = "textarea";
export var TextareaWrapper = styled(InputBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  .textarea__icon-box {\n    position: absolute;\n    top: calc(50% - 8px);\n    right: 48px;\n  }\n"], ["\n  ", "\n\n  ", "\n\n  .textarea__icon-box {\n    position: absolute;\n    top: calc(50% - 8px);\n    right: 48px;\n  }\n"])), function (_a) {
    var cols = _a.cols;
    return cols && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: max-content;\n    "], ["\n      width: max-content;\n    "])));
}, function (_a) {
    var size = _a.size;
    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    height: auto;\n    min-height: ", "px;\n  "], ["\n    height: auto;\n    min-height: ", "px;\n  "])), size === "l" ? 56 : 48);
});
export var TextAreaResizerWrapper = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeTextArea,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  resize: vertical;\n  overflow-x: hidden;\n  overflow-y: visible;\n  height: ", "px;\n  min-height: ", "px;\n\n  &::-webkit-resizer {\n    ", ";\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border: 4px solid transparent;\n    border-radius: 9px;\n    background-clip: content-box;\n  }\n\n  &::-webkit-scrollbar-corner {\n    background: transparent;\n  }\n\n  &::-webkit-scrollbar-button {\n    display: none;\n  }\n"], ["\n  width: 100%;\n  resize: vertical;\n  overflow-x: hidden;\n  overflow-y: visible;\n  height: ", "px;\n  min-height: ", "px;\n\n  &::-webkit-resizer {\n    ", ";\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border: 4px solid transparent;\n    border-radius: 9px;\n    background-clip: content-box;\n  }\n\n  &::-webkit-scrollbar-corner {\n    background: transparent;\n  }\n\n  &::-webkit-scrollbar-button {\n    display: none;\n  }\n"])), function (_a) {
    var size = _a.size;
    return (size === "m" ? "16" : "24");
}, function (_a) {
    var size = _a.size;
    return (size === "m" ? "16" : "24");
}, function (_a) {
    var theme = _a.theme, isReadOnly = _a.isReadOnly, isDisabled = _a.isDisabled;
    var color = theme.components[COMPONENT_NAME].colorResizeIcon;
    if (isReadOnly) {
        color = theme.components[COMPONENT_NAME].colorResizeIconReadOnly;
    }
    else if (isDisabled) {
        color = theme.components[COMPONENT_NAME].colorResizeIconDisabled;
    }
    var url = "data:image/svg+xml;charset=UTF-8,%3csvg width='8' height='16' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_4433_237979)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.86654 0.133464C8.04449 0.311417 8.04449 0.599934 7.86654 0.777887L0.777886 7.86653C0.599934 8.04448 0.311416 8.04448 0.133464 7.86653C-0.0444877 7.68858 -0.0444886 7.40006 0.133464 7.22211L7.22211 0.133464C7.40007 -0.0444883 7.68858 -0.0444879 7.86654 0.133464ZM7.86654 2.71121C8.04449 2.88916 8.04449 3.17768 7.86654 3.35563L3.35558 7.86659C3.17762 8.04454 2.88911 8.04454 2.71115 7.86659C2.5332 7.68864 2.5332 7.40012 2.71115 7.22217L7.22211 2.71121C7.40007 2.53326 7.68858 2.53326 7.86654 2.71121ZM7.86654 5.93327C8.04449 5.75532 8.04449 5.4668 7.86654 5.28885C7.68858 5.1109 7.40006 5.1109 7.22211 5.28885L5.28884 7.22212C5.11089 7.40007 5.11089 7.68859 5.28884 7.86654C5.4668 8.04449 5.75531 8.04449 5.93327 7.86654L7.86654 5.93327Z' fill='" + color.replace("#", "%23") + "' /%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_4433_237979'%3e%3crect width='8' height='8' fill='white' transform='matrix(-1 -8.74228e-08 -8.74228e-08 1 8 0)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ";
    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        background: url(\"", "\") no-repeat;\n      "], ["\n        background: url(\"", "\") no-repeat;\n      "])), url);
}, function (_a) {
    var theme = _a.theme;
    return theme.components[COMPONENT_NAME].backgroundScroll;
});
TextAreaResizerWrapper.defaultProps = {
    theme: LIGHT_THEME
};
export var TextareaStyled = styled.textarea.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeTextArea,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  overflow: hidden;\n  color: ", ";\n  background-color: transparent;\n  border: none;\n  outline: none;\n  width: ", ";\n  box-sizing: content-box;\n  text-overflow: ellipsis;\n  min-height: 24px;\n  ", ";\n  resize: none;\n\n  .textarea__resizer-icon {\n    fill: currentColor;\n  }\n\n  &:hover {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n  }\n\n  &:read-only {\n    color: ", ";\n  }\n"], ["\n  ", ";\n  overflow: hidden;\n  color: ", ";\n  background-color: transparent;\n  border: none;\n  outline: none;\n  width: ", ";\n  box-sizing: content-box;\n  text-overflow: ellipsis;\n  min-height: 24px;\n  ", ";\n  resize: none;\n\n  .textarea__resizer-icon {\n    fill: currentColor;\n  }\n\n  &:hover {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n  }\n\n  &:read-only {\n    color: ", ";\n  }\n"])), corvusOnest, function (_a) {
    var theme = _a.theme;
    return theme.components[COMPONENT_NAME].color;
}, function (_a) {
    var isShowClearIcon = _a.isShowClearIcon;
    return isShowClearIcon ? "calc(100% - 48px)" : "calc(100% - 26px)";
}, function (_a) {
    var cols = _a.cols;
    return cols && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      width: auto;\n    "], ["\n      width: auto;\n    "])));
}, function (_a) {
    var theme = _a.theme;
    return theme.components[COMPONENT_NAME].colorHover;
}, function (_a) {
    var theme = _a.theme;
    return theme.components[COMPONENT_NAME].colorDisabled;
}, function (_a) {
    var theme = _a.theme;
    return theme.components[COMPONENT_NAME].colorReadOnly;
});
TextareaStyled.defaultProps = {
    theme: LIGHT_THEME
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
