import styled, { css } from 'styled-components';

import { InputState, Size } from './utils';

const StyledTextArea = styled.textarea<{
  autoResize?: boolean;
  themeSize: Size;
  themeState: InputState;
}>`
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: ${({ theme }) => theme.borderWidths.input.default} solid
    ${({ theme }) => theme.colors.input.border};
  border-radius: ${({ theme }) => theme.radii.input.default};
  font-weight: ${({ theme }) => theme.fontWeights.input.default};
  color: ${({ theme }) => theme.colors.input.text};

  &::placeholder {
    color: ${({ theme }) => theme.colors.input.disabledText};
  }

  ${({ autoResize }): string =>
    autoResize === true
      ? `
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        resize: none;
        overflow: hidden;
      `
      : `resize: vertical`};

  ${({ themeState, theme }) => {
    switch (themeState) {
      case 'enabled':
        return css`
          background: ${theme.colors.input.background};
          &:hover {
            border-color: ${theme.colors.input.focusBorder};
          }
          &:focus {
            outline: none;
            border-color: ${theme.colors.input.focusBorder};
            box-shadow: ${theme.shadows.input.focus};
          }
        `;
      case 'disabled':
        return css`
          color: ${theme.colors.input.disabledText};
          border-color: ${theme.colors.input.border};
          background: ${theme.colors.input.disabledBackground};
          cursor: not-allowed;
        `;
      case 'invalid':
        return css`
          background: ${theme.colors.input.background};
          border-color: ${theme.colors.input.invalidBorder};
          &:focus-within {
            outline: none;
            border-color: ${theme.colors.input.invalidBorder};
            box-shadow: ${theme.shadows.input.invalidFocus};
          }
        `;
    }
  }};

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          padding: ${theme.space.input.smallPadding};
          min-height: ${theme.sizes.input.textAreaSmall};
          font-size: ${theme.fontSizes.input.small};
          line-height: ${theme.lineHeights.input.small};
        `;
      case 'medium':
        return css`
          padding: ${theme.space.input.mediumPadding};
          min-height: ${theme.sizes.input.textAreaMedium};
          font-size: ${theme.fontSizes.input.medium};
          line-height: ${theme.lineHeights.input.medium};
        `;
      case 'large':
        return css`
          padding: ${theme.space.input.largePadding};
          min-height: ${theme.sizes.input.textAreaLarge};
          font-size: ${theme.fontSizes.input.large};
          line-height: ${theme.lineHeights.input.large};
        `;
    }
  }};
`;

const AutoResizeWrapper = styled.div`
  position: relative;
  margin: 0;
  padding: 0;
`;

const HiddenTextArea = styled.div<{ themeSize: Size }>`
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: ${({ theme }) => theme.borderWidths.input.default} solid
    ${({ theme }) => theme.colors.input.border};
  font-weight: ${({ theme }) => theme.fontWeights.input.default};
  overflow-wrap: break-word;
  white-space: pre-line;
  opacity: 0;

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          padding: ${theme.space.input.smallPadding};
          min-height: ${theme.sizes.input.textAreaSmall};
          font-size: ${theme.fontSizes.input.small};
          line-height: ${theme.lineHeights.input.small};
        `;
      case 'medium':
        return css`
          padding: ${theme.space.input.mediumPadding};
          min-height: ${theme.sizes.input.textAreaMedium};
          font-size: ${theme.fontSizes.input.medium};
          line-height: ${theme.lineHeights.input.medium};
        `;
      case 'large':
        return css`
          padding: ${theme.space.input.largePadding};
          min-height: ${theme.sizes.input.textAreaLarge};
          font-size: ${theme.fontSizes.input.large};
          line-height: ${theme.lineHeights.input.large};
        `;
    }
  }};
`;

export { StyledTextArea as default, AutoResizeWrapper, HiddenTextArea };