import {
  Button as BaseButton,
  ButtonProps,
  ComponentWithAs,
  forwardRef,
  useColorMode,
} from '@chakra-ui/react';

import { theme } from '../../modules/theme';
import { CLASS_NAMES } from '../constants';
import { Spinner } from '../Spinner';

const COMPONENT = theme.components.Button!;
const DEFAULT_PROPS = COMPONENT.defaultProps!;

export const STYLES = {
  [CLASS_NAMES.BUTTON__ICON]: {
    mr: {
      '2xl': theme.sizes['3'],
      xl: theme.sizes['2'],
      lg: theme.sizes['2'],
      md: theme.sizes['2'],
      sm: theme.sizes['2'],
      xs: theme.sizes['1'],
    },
  },
  [CLASS_NAMES.ICON]: {
    fontSize: {
      '2xl': theme.fontSizes['6'],
      xl: theme.fontSizes['6'],
      lg: theme.fontSizes['6'],
      md: theme.fontSizes['4'],
      sm: theme.fontSizes['4'],
      xs: theme.fontSizes['3'],
    },
  },
};

const STYLES_BUTTON__ICON = STYLES[CLASS_NAMES.BUTTON__ICON];
const STYLES_ICON = STYLES[CLASS_NAMES.ICON];

export { ButtonRightAddon } from './ButtonRightAddon';

export const Button: ComponentWithAs<'button', ButtonProps> = forwardRef<ButtonProps, 'button'>(
  (
    { isLoading, size = DEFAULT_PROPS.size!, variant = DEFAULT_PROPS.variant!, ...otherProps },
    ref,
  ) => {
    const { colorMode } = useColorMode();

    return (
      <BaseButton
        ref={ref}
        isLoading={isLoading}
        size={size}
        variant={variant}
        spinner={<Spinner />}
        {...otherProps}
        sx={{
          [`.${CLASS_NAMES.BUTTON__ICON}`]: {
            ...STYLES_BUTTON__ICON,
          },
          [`.${CLASS_NAMES.ICON}`]: {
            ...STYLES_ICON,
          },
          ...(isLoading &&
            (variant === 'solid' || variant === 'subtle') && {
              color: `${theme.colors[colorMode].text.on.color.primary} !important`,
            }),
          ...otherProps.sx,
        }}
      />
    );
  },
);