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

import StyledInput, { InputWrapper } from '../Input/StyledInput';
import { Size } from '../Input/utils';

const TagInputWrapper = styled(InputWrapper)<{
  themeSize: Size;
}>`
  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          padding-top: ${theme.space.input.smallPadding};
          padding-bottom: ${theme.space.input.smallPadding};

          ${StyledInput} {
            height: ${`calc(${theme.sizes.input.small} - ${theme.space.input.smallPadding})`};
          }
        `;
      case 'medium':
        return css`
          padding-top: ${theme.space.input.mediumPadding};
          padding-bottom: ${theme.space.input.mediumPadding};

          ${StyledInput} {
            height: ${`calc(${theme.sizes.input.medium} - ${theme.space.input.mediumPadding})`};
          }
        `;
      case 'large':
        return css`
          padding-top: ${theme.space.input.largePadding};
          padding-bottom: ${theme.space.input.largePadding};

          ${StyledInput} {
            height: ${`calc(${theme.sizes.input.large} - ${theme.space.input.largePadding})`};
          }
        `;
    }
  }};
`;

const TagInputContainer = styled.div<{
  themePaddingX: Size | 'none';
}>`
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;

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

  width: calc(100% + ${({ theme }) => theme.space.input.tagMargin});
  margin: -${({ theme }) => theme.space.input.tagMargin} 0 0 -${({ theme }) =>
      theme.space.input.tagMargin};

  > * {
    margin: ${({ theme }) => theme.space.input.tagMargin} 0 0
      ${({ theme }) => theme.space.input.tagMargin};
  }

  > ${StyledInput} {
    min-width: ${({ theme }) => theme.sizes.input.tagInputMinWidth};
    flex: 1;
  }
`;

export { TagInputWrapper, TagInputContainer };