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

const StyledSelectButton = styled.label`
  display: inline-block;
  margin: 0;
  padding: 0;
`;

const SelectButtonGroupWrapper = styled.div<{
  themeSize: 'small' | 'medium' | 'large';
}>`
  display: inline-flex;
  flex-wrap: wrap;
  padding: 0;

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          margin: ${theme.space.selectButton.groupSmallMargin};
          width: ${theme.sizes.selectButton.groupSmallWidth};
          > * {
            margin: ${theme.space.selectButton.smallMargin};
          }
        `;
      case 'medium':
        return css`
          margin: ${theme.space.selectButton.groupMediumMargin};
          width: ${theme.sizes.selectButton.groupMediumWidth};
          > * {
            margin: ${theme.space.selectButton.mediumMargin};
          }
        `;
      case 'large':
        return css`
          margin: ${theme.space.selectButton.groupLargeMargin};
          width: ${theme.sizes.selectButton.groupLargeWidth};
          > * {
            margin: ${theme.space.selectButton.largeMargin};
          }
        `;
    }
  }};
`;

const StyledInputText = styled.span<{
  themeSize: 'small' | 'medium' | 'large';
}>`
  box-sizing: border-box;
  line-height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-style: solid;
  border-color: ${({ theme }) => theme.colors.selectButton.defaultBorder};
  border-width: ${({ theme }) => theme.borderWidths.selectButton.default};
  border-radius: ${({ theme }) => theme.radii.selectButton.default};
  font-weight: ${({ theme }) => theme.fontWeights.selectButton.default};
  margin: 0;
  padding: 0;
  color: ${({ theme }) => theme.colors.selectButton.defaultText};
  &:hover,
  &:focus {
    color: ${({ theme }) => theme.colors.selectButton.hover};
    border-color: ${({ theme }) => theme.colors.selectButton.hover};
  }

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

const StyledInput = styled.input`
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  margin: 0;
  padding: 0;

  &:disabled ~ ${StyledInputText} {
    color: ${({ theme }) => theme.colors.selectButton.disabledText};
    background-color: ${({ theme }) =>
      theme.colors.selectButton.disabledBackground};
    border-color: ${({ theme }) => theme.colors.selectButton.defaultBorder};
    pointer-events: none;
  }

  &:disabled:checked ~ ${StyledInputText} {
    color: ${({ theme }) => theme.colors.selectButton.disabledSelectedText};
    background-color: ${({ theme }) =>
      theme.colors.selectButton.disabledSelectedBackground};
    border: none;
  }

  &:checked + ${StyledInputText} {
    border-color: ${({ theme }) =>
      theme.colors.selectButton.selectedBackground};
    color: ${({ theme }) => theme.colors.selectButton.selectedText};
    background: ${({ theme }) => theme.colors.selectButton.selectedBackground};
  }
`;

export {
  SelectButtonGroupWrapper,
  StyledSelectButton,
  StyledInput,
  StyledInputText,
};