import styled, { css } from 'styled-components';
import StyledInput, { InputWrapper } from '../../Input/StyledInput';
import StyledTextArea, { HiddenTextArea } from '../../Input/StyledTextArea';
import { Size } from './types';

const FieldWrapper = styled.div<{
  themeStatus?: 'success' | 'warning' | 'error' | 'validating';
}>`
  margin: 0;
  padding: 0;

  ${({ themeStatus, theme }) => {
    switch (themeStatus) {
      case 'warning':
        return css`
          ${InputWrapper} {
            border-color: ${theme.colors.form.warningBorder};
            &:focus-within {
              border-color: ${theme.colors.form.warningBorder};
              box-shadow: ${theme.shadows.form.warningFocus};
            }
          }

          ${StyledTextArea} {
            border-color: ${theme.colors.form.warningBorder};
            &:focus-within {
              border-color: ${theme.colors.form.warningBorder};
              box-shadow: ${theme.shadows.form.warningFocus};
            }
          }
        `;
      case 'error':
        return css`
          ${InputWrapper} {
            border-color: ${theme.colors.form.errorBorder};
            &:focus-within {
              border-color: ${theme.colors.form.errorBorder};
              box-shadow: ${theme.shadows.form.errorFocus};
            }
          }

          ${StyledInput} {
            color: ${theme.colors.form.errorText};
          }

          ${StyledTextArea} {
            border-color: ${theme.colors.form.errorBorder};
            &:focus-within {
              border-color: ${theme.colors.form.errorBorder};
              box-shadow: ${theme.shadows.form.errorFocus};
            }
          }

          ${StyledTextArea} {
            color: ${theme.colors.form.errorText};
          }
        `;
      case 'success':
      case 'validating':
      case undefined:
        return css``;
    }
  }};
`;

const ValidateIconWrapper = styled.div<{
  themeSize: Size;
}>`
  margin: 0;
  padding: 0;
  display: flex;

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          padding-left: ${theme.space.form.smallIconPadding};
        `;
      case 'medium':
        return css`
          padding-left: ${theme.space.form.mediumIconPadding};
        `;
      case 'large':
        return css`
          padding-left: ${theme.space.form.largeIconPadding};
        `;
    }
  }};
`;

const ValidateSuffixWrapper = styled.div`
  margin: 0;
  padding: 0;
  display: flex;
`;

const TextAreaWrapper = styled.div<{ themeSize: Size }>`
  margin: 0;
  padding: 0px;
  position: relative;

  ${ValidateIconWrapper} {
    position: absolute;

    ${({ themeSize, theme }) => {
      switch (themeSize) {
        case 'small':
          return css`
            top: calc(
              ${theme.space.form.smallIconPadding} +
                ${theme.borderWidths.input.default}
            );
            right: calc(
              ${theme.space.form.smallIconPadding} +
                ${theme.borderWidths.input.default}
            );
            font-size: ${theme.fontSizes.input.small};
          `;
        case 'medium':
          return css`
            top: calc(
              ${theme.space.form.mediumIconPadding} +
                ${theme.borderWidths.input.default}
            );
            right: calc(
              ${theme.space.form.mediumIconPadding} +
                ${theme.borderWidths.input.default}
            );
            font-size: ${theme.fontSizes.input.medium};
          `;
        case 'large':
          return css`
            top: calc(
              ${theme.space.form.largeIconPadding} +
                ${theme.borderWidths.input.default}
            );
            right: calc(
              ${theme.space.form.largeIconPadding} +
                ${theme.borderWidths.input.default}
            );
            font-size: ${theme.fontSizes.input.large};
          `;
      }
    }};
  }

  ${StyledTextArea}, ${HiddenTextArea} {
    ${({ themeSize, theme }) => {
      switch (themeSize) {
        case 'small':
          return css`
            padding-right: calc(
              ${theme.space.form.smallIconPadding} * 2 +
                ${theme.fontSizes.input.small}
            );
          `;
        case 'medium':
          return css`
            padding-right: calc(
              ${theme.space.form.mediumIconPadding} * 2 +
                ${theme.fontSizes.input.medium}
            );
          `;
        case 'large':
          return css`
            padding-right: calc(
              ${theme.space.form.largeIconPadding} * 2 +
                ${theme.fontSizes.input.large}
            );
          `;
      }
    }};
  }
`;

export {
  FieldWrapper,
  ValidateIconWrapper,
  ValidateSuffixWrapper,
  TextAreaWrapper,
};