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

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

const InputWrapper = styled.div<{
  themeSize: Size;
  themeState: InputState;
}>`
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: ${({ theme }) => theme.borderWidths.input.default} solid
    ${({ theme }) => theme.colors.input.border};
  border-radius: ${({ theme }) => theme.radii.input.default};
  line-height: 100%;
  font-weight: ${({ theme }) => theme.fontWeights.input.default};

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          height: ${theme.sizes.input.small};
          font-size: ${theme.fontSizes.input.small};
        `;
      case 'medium':
        return css`
          height: ${theme.sizes.input.medium};
          font-size: ${theme.fontSizes.input.medium};
        `;
      case 'large':
        return css`
          height: ${theme.sizes.input.large};
          font-size: ${theme.fontSizes.input.large};
        `;
    }
  }};

  ${({ themeState, theme }) => {
    switch (themeState) {
      case 'enabled':
        return css`
          background: ${theme.colors.input.background};
          &:hover {
            border-color: ${theme.colors.input.focusBorder};
          }
          &:focus-within {
            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;
          & > ${StyledTag} {
            color: ${theme.colors.input.disabledText};
            border-color: ${theme.colors.input.border};
            background: ${theme.colors.input.disabledBackground};

            & > ${CloseButton} {
              color: ${theme.colors.input.disabledText};
              pointer-events: none;
              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};
          }
        `;
    }
  }};
`;

const StyledInput = styled.input<{
  themePaddingLeft: Size | 'none';
  themePaddingRight: Size | 'none';
}>`
  flex: 1;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: ${({ theme }) => theme.radii.input.default};
  font-weight: inherit;
  font-size: inherit;

  color: ${({ theme }) => theme.colors.input.text};
  background-color: ${({ theme }) => theme.colors.input.background};

  &:focus {
    outline: none;
  }

  &:disabled {
    cursor: not-allowed;
    color: ${({ theme }) => theme.colors.input.disabledText};
    background-color: ${({ theme }) => theme.colors.input.disabledBackground};
  }

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

  ${({ themePaddingLeft, theme }) => {
    switch (themePaddingLeft) {
      case 'small':
        return css`
          padding-left: ${theme.space.input.smallPadding};
        `;
      case 'medium':
        return css`
          padding-left: ${theme.space.input.mediumPadding};
        `;
      case 'large':
        return css`
          padding-left: ${theme.space.input.largePadding};
        `;
      case 'none':
        return css`
          padding-left: 0;
        `;
    }
  }};

  ${({ themePaddingRight, theme }) => {
    switch (themePaddingRight) {
      case 'small':
        return css`
          padding-right: ${theme.space.input.smallPadding};
        `;
      case 'medium':
        return css`
          padding-right: ${theme.space.input.mediumPadding};
        `;
      case 'large':
        return css`
          padding-right: ${theme.space.input.largePadding};
        `;
      case 'none':
        return css`
          padding-right: 0;
        `;
    }
  }};
`;

const AffixWrapper = styled.span<{
  themeMarginLeft: 'auto' | 'none';
  themeSize: Size;
}>`
  margin: 0;
  padding: 0;

  > * {
    display: block;
  }

  ${({ themeMarginLeft }) => {
    switch (themeMarginLeft) {
      case 'auto':
        return css`
          margin-left: auto;
        `;
      case 'none':
        return css``;
    }
  }};

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          padding-left: ${theme.space.input.smallPadding};
          padding-right: ${theme.space.input.smallPadding};
        `;
      case 'medium':
        return css`
          padding-left: ${theme.space.input.mediumPadding};
          padding-right: ${theme.space.input.mediumPadding};
        `;
      case 'large':
        return css`
          padding-left: ${theme.space.input.largePadding};
          padding-right: ${theme.space.input.largePadding};
        `;
    }
  }};
`;

export { StyledInput as default, InputWrapper, AffixWrapper };