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

const Label = styled.label`
  display: inline-flex;
  position: relative;
  margin: 0;
  padding: 0;
`;

const LabelText = styled.span`
  margin: 0;
  padding: 0;
  padding-left: ${({ theme }) => theme.space.checkbox.labelPaddingLeft};
  font-size: ${({ theme }) => theme.fontSizes.checkbox.default};
  font-weight: ${({ theme }) => theme.fontWeights.checkbox.default};
  line-height: ${({ theme }) => theme.lineHeights.checkbox.default};
  color: ${({ theme }) => theme.colors.checkbox.text};

  &::before {
    content: '';
    position: absolute;
    width: ${({ theme }) => theme.sizes.checkbox.width};
    height: ${({ theme }) => theme.sizes.checkbox.height};
    top: ${({ theme }) => theme.space.checkbox.top};
    left: 0;
    border: ${({ theme }) => theme.borderWidths.checkbox.default} solid
      ${({ theme }) => theme.colors.checkbox.defaultBorder};
    border-radius: ${({ theme }) => theme.radii.checkbox.default};
    background: ${({ theme }) => theme.colors.checkbox.defaultBackground};
    box-sizing: border-box;
  }

  &:hover {
    cursor: pointer;

    &::before {
      border-color: ${({ theme }) => theme.colors.checkbox.checkedBorder};
    }
  }
`;

const HiddenInput = styled.input`
  display: none;
  margin: 0;
  padding: 0;

  &:checked ~ ${LabelText} {
    &::before {
      border-color: ${({ theme }) => theme.colors.checkbox.checkedBorder};
      background: ${({ theme }) => theme.colors.checkbox.checkedBackground};
    }

    &::after {
      content: '';
      position: absolute;
      height: ${({ theme }) => theme.sizes.checkbox.markHeight};
      width: ${({ theme }) => theme.sizes.checkbox.markWidth};
      top: ${({ theme }) => theme.space.checkbox.markTop};
      left: ${({ theme }) => theme.space.checkbox.markLeft};
      border-width: 0 ${({ theme }) => theme.borderWidths.checkbox.default}
        ${({ theme }) => theme.borderWidths.checkbox.default} 0;
      border-color: ${({ theme }) => theme.colors.checkbox.defaultCheckmark};
      border-style: solid;
      transform: translate(-50%, -30%) rotate(45deg);
      box-sizing: border-box;
    }
  }

  &:indeterminate ~ ${LabelText} {
    &::after {
      content: '';
      position: absolute;
      height: ${({ theme }) => theme.sizes.checkbox.indeterminateBoxHeight};
      width: ${({ theme }) => theme.sizes.checkbox.indeterminateBoxWidth};
      top: ${({ theme }) => theme.space.checkbox.indeterminateBoxTop};
      left: ${({ theme }) => theme.space.checkbox.indeterminateBoxLeft};
      background: ${({ theme }) =>
        theme.colors.checkbox.indeterminateBoxBackground};
      border-radius: ${({ theme }) => theme.radii.checkbox.indeterminateBox};
    }
  }

  &:disabled ~ ${LabelText} {
    color: ${({ theme }) => theme.colors.checkbox.disabledText};

    &:hover {
      cursor: not-allowed;
    }

    &::before {
      border-color: ${({ theme }) => theme.colors.checkbox.defaultBorder};
      background: ${({ theme }) => theme.colors.checkbox.disabledBackground};
    }

    &::after {
      border-color: ${({ theme }) => theme.colors.checkbox.disabledCheckmark};
    }
  }
`;

const GroupWrapper = styled.div<{ themeLayout: 'vertical' | 'horizontal' }>`
  display: flex;
  margin: 0;
  padding: 0;

  ${({ themeLayout, theme }) => {
    switch (themeLayout) {
      case 'vertical':
        return css`
          flex-direction: column;
          & > ${Label}:not(:first-child) {
            margin-top: ${theme.space.checkbox.marginTop};
          }
        `;
      case 'horizontal':
        return css`
          & > ${Label}:not(:first-child) {
            margin-left: ${theme.space.checkbox.marginLeft};
          }
        `;
    }
  }};
`;

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

const ButtonLabelText = 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.checkbox.buttonDefaultBorder};
  border-width: ${({ theme }) => theme.borderWidths.checkbox.default};
  border-radius: ${({ theme }) => theme.radii.checkbox.default};
  font-weight: ${({ theme }) => theme.fontWeights.checkbox.default};
  margin: 0;
  padding: 0;
  color: ${({ theme }) => theme.colors.checkbox.buttonText};
  &:hover,
  &:focus {
    color: ${({ theme }) => theme.colors.checkbox.buttonHover};
    border-color: ${({ theme }) => theme.colors.checkbox.buttonHover};
  }

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          height: ${theme.sizes.checkbox.buttonSmall};
          padding: ${theme.space.checkbox.buttonSmallPadding};
          font-size: ${theme.fontSizes.checkbox.buttonsmall};
        `;
      case 'medium':
        return css`
          height: ${theme.sizes.checkbox.buttonMedium};
          padding: ${theme.space.checkbox.buttonMediumPadding};
          font-size: ${theme.fontSizes.checkbox.buttonMedium};
        `;
      case 'large':
        return css`
          height: ${theme.sizes.checkbox.buttonLarge};
          padding: ${theme.space.checkbox.buttonLargePadding};
          font-size: ${theme.fontSizes.checkbox.buttonLarge};
        `;
    }
  }};
`;

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

  &:disabled ~ ${ButtonLabelText} {
    color: ${({ theme }) => theme.colors.checkbox.buttonDisabledText};
    background-color: ${({ theme }) =>
      theme.colors.checkbox.buttonDisabledBackground};
    border-color: ${({ theme }) => theme.colors.checkbox.buttonDefaultBorder};
    pointer-events: none;
  }

  &:disabled:checked ~ ${ButtonLabelText} {
    color: ${({ theme }) => theme.colors.checkbox.buttonDisabledSelectedText};
    background-color: ${({ theme }) =>
      theme.colors.checkbox.buttonDisabledSelectedBackground};
    border: none;
  }

  &:checked + ${ButtonLabelText} {
    border-color: ${({ theme }) =>
      theme.colors.checkbox.buttonSelectedBackground};
    color: ${({ theme }) => theme.colors.checkbox.buttonSelectedText};
    background: ${({ theme }) =>
      theme.colors.checkbox.buttonSelectedBackground};
  }
`;

const ButtonGroupWrapper = 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.checkbox.buttonGroupSmallMargin};
          width: ${theme.sizes.checkbox.buttonGroupSmallWidth};
          > * {
            margin: ${theme.space.checkbox.buttonSmallMargin};
          }
        `;
      case 'medium':
        return css`
          margin: ${theme.space.checkbox.buttonGroupMediumMargin};
          width: ${theme.sizes.checkbox.buttonGroupMediumWidth};
          > * {
            margin: ${theme.space.checkbox.buttonMediumMargin};
          }
        `;
      case 'large':
        return css`
          margin: ${theme.space.checkbox.buttonGroupLargeMargin};
          width: ${theme.sizes.checkbox.buttonGroupLargeWidth};
          > * {
            margin: ${theme.space.checkbox.buttonLargeMargin};
          }
        `;
    }
  }};
`;

export {
  Label,
  LabelText,
  HiddenInput,
  GroupWrapper,
  ButtonLabel,
  ButtonLabelText,
  ButtonHiddenInput,
  ButtonGroupWrapper,
};