import { ToggleButtonProps, ToggleButtonDefaultProps } from './definitions';
import { Styles } from '~/styles/types';
import { visuallyHidden } from '~/styles/utils';
import { styled } from '~/styles';
import { ButtonIconPosition } from '../Button';

export const Input = styled.input(visuallyHidden);

export const getVariant: Styles<ToggleButtonProps> = ({
  theme,
  checked,
  variant = ToggleButtonDefaultProps.variant,
}) => {
  return {
    primary: {
      backgroundColor: checked ? theme.colors.brandDark : theme.colors.primary,
      color: '#fff',
      boxShadow: theme.shadows[2],
    },
    secondary: {
      backgroundColor: checked
        ? theme.colors.brandLightest
        : theme.colors.disabled,
      color: checked ? theme.colors.brandMain : theme.colors.highlightText,
    },
    ghost: {
      backgroundColor: checked ? theme.colors.disabled : 'transparent',
      color: checked ? theme.colors.highlightText : theme.colors.highlightText,
    },
    ghostSecondary: {
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      color: 'currentColor',
      opacity: checked ? 0.5 : 1,
      padding: 0,
    },
    gray: {
      backgroundColor: checked
        ? theme.colors.brandLightest
        : theme.colors.gray[4],
      color: checked ? theme.colors.brandMain : theme.colors.gray[1],
    },
    light: {
      backgroundColor: checked ? theme.colors.gray[4] : theme.colors.white,
      color: theme.colors.gray[1],
      boxShadow: theme.shadows[2],
    },
    transparent: {
      backgroundColor: 'transparent',
    },
    raw: {},
  }[variant];
};

export const getIconStyle = (position: ButtonIconPosition) =>
  ({
    top: 'Bottom',
    bottom: 'Top',
    left: 'Right',
    right: 'Left',
  }[position]);
