import sx from '@styled-system/css';
import shouldForwardProp from '@styled-system/should-forward-prop';
import variant from '@styled-system/variant';
import styled from '../styled';
import { Theme } from '../theme';
import { STYLE } from './shared';
import Base, { ButtonProps } from './base';

type ButtonVariants = 'default' | 'primary' | 'alt' | 'ghost' | 'link';

const Button = styled(Base, { shouldForwardProp })<ButtonProps<ButtonVariants>>(
  // @ts-ignore
  ({
    disabled = false,
    recorded,
    variant,
  }: {
    disabled?: boolean;
    recorded?: boolean;
    variant: ButtonVariants;
  }) => {
    return sx({
      color: 'white',
      ...STYLE(disabled),
    });
  },
  variant({
    variants: {
      default: {
        backgroundColor: 'black',
      },
      primary: {
        backgroundColor: 'TEDRed.0',
      },
      ghost: {
        backgroundColor: 'transparent',
        color: 'currentColor',
        border: '1px solid currentColor',
      },
      alt: {
        backgroundColor: 'gray.2',
        color: 'black',
      },
      link: {
        backgroundColor: 'transparent',
        color: 'currentColor',
        borderRadius: 'none',
      },
    },
  }),
  variant({
    prop: 'state',
    variants: {
      recorded: {
        color: theme => `${theme.colors.TEDRed[0]} !important`,
        backgroundColor: theme => `${theme.colors.TEDRed[1]} !important`,
      },
    },
  }),
);

Button.defaultProps = {
  variant: 'default',
  size: 'md',
  disabled: false,
};

Button.displayName = 'Monterey(Button)';

export default Button;