import * as React from 'react';
import sx from '@styled-system/css';
import shouldForwardProp from '@styled-system/should-forward-prop';
import variant from '@styled-system/variant';
import { ResponsiveValue } from 'styled-system';
import { styles as textVariants } from '../text';
import styled from '../styled';

export type ButtonSize = 'sm' | 'md' | 'lg';

export type ButtonProps<V> = React.HTMLAttributes<HTMLElement> & {
  disabled?: boolean;
  size?: ResponsiveValue<ButtonSize>;
  variant?: ResponsiveValue<V>;
};

const Base = styled('div', { shouldForwardProp })<ButtonProps<string>>(
  // @ts-ignore
  ({ disabled = false }: ButtonProps) =>
    sx({
      ...textVariants['1b'],
      justifyContent: 'center',
      display: 'flex',
      borderRadius: '50px',
      textAlign: 'center',
      textTransform: 'capitalize',
      textDecoration: 'none',
      cursor: 'pointer',
      userSelect: 'none',
      transition: 'opacity .1s linear',
      '&:hover': {
        opacity: 0.75,
      },
      '&:active': {
        opacity: 0.9,
      },
      '&:[disabled]': {
        cursor: 'not-allowed',
        opacity: 0.25,
      },
      ...(disabled && {
        cursor: 'not-allowed',
        opacity: 0.25,
      }),
    }),
  variant({
    prop: 'size',
    variants: {
      md: {
        paddingY: 2,
        paddingX: 5,
        maxWidth: 50,
      },
      sm: {
        ...textVariants['-1m'],
        paddingY: 1,
        paddingX: 3,
      },
    },
  }),
);

Base.defaultProps = {
  size: 'md',
  disabled: false,
};

Base.displayName = 'Monterey(Button.Base)';

export default Base;