import * as React from 'react';
import classNames from 'classnames';

import { Button as CoreButton, type ButtonProps as CoreButtonProps } from '@shoptet/ui-core-web';
import type { Exact, SafeOmit, SafePick } from '@shoptet/utils';

import type { OmitPrivate, SafeExtract, Size, Variant } from '../../types';
import { Icon } from '../Icon/Icon';
import type { IconName } from '../Icon/IconName';
import { Loader } from '../Loader/Loader';

const DEFAULT_SIZE = 'sm';
const DEFAULT_VARIANT = 'primary';

const mapButtonSizeToIconSize = { sm: 'sm', md: 'md', lg: 'md' } as const;
const mapButtonSizeToLoaderSize = { sm: 'sm', md: 'md', lg: 'md' } as const;

export interface ButtonInheritedCoreButtonProps extends OmitPrivate<SafeOmit<CoreButtonProps, 'loading'>> {}

export interface ButtonInheritedButtonProps extends OmitPrivate<React.ButtonHTMLAttributes<HTMLButtonElement>> {}

export interface ButtonOwnProps {
  /**
   * Variant of the button.
   * @default 'primary'
   */
  variant?: SafeExtract<Variant, 'primary' | 'secondary' | 'action' | 'destructive'>;
  /**
   * Size of the button.
   * @default 'sm'
   */
  size?: SafeExtract<Size, 'sm' | 'md' | 'lg'>;
  /**
   * Displays an icon before the label.
   * @default undefined
   */
  iconLeft?: IconName;
  /**
   * Displays an icon after the label.
   * @default undefined
   */
  iconRight?: IconName;
  children?: React.ReactNode;
  /**
   * @deprecated - Use iconLeft or iconRight instead
   */
  icon?: IconName;
  /**
   * Displays a loader while hiding its contents and disables all interactions.
   * @default false
   */
  isLoading?: boolean;
}

export interface ButtonProps extends ButtonOwnProps, ButtonInheritedCoreButtonProps, ButtonInheritedButtonProps {
  form?: ButtonInheritedButtonProps['form'];
  id?: ButtonInheritedButtonProps['id'];
  onBlur?: ButtonInheritedButtonProps['onBlur'];
  onClick?: ButtonInheritedButtonProps['onClick'];
  onFocus?: ButtonInheritedButtonProps['onFocus'];
  /**
   * @default 'button'
   */
  type?: ButtonInheritedButtonProps['type'];
  value?: ButtonInheritedButtonProps['value'];
}

export const getButtonClassName = <
  T extends ButtonOwnProps & ButtonInheritedCoreButtonProps & SafePick<CoreButtonProps, 'className'>,
>({
  variant = DEFAULT_VARIANT,
  size = DEFAULT_SIZE,
  icon,
  iconLeft,
  iconRight,
  isLoading,
  className,
}: T) => {
  return classNames(
    'btn',
    `btn-${variant}`,
    `btn-${size}`,
    {
      [`btn--iconLeft`]: iconLeft,
      [`btn--iconRight`]: iconRight,
      [icon ?? '']: icon,
      [`btn--isLoading`]: isLoading,
    },
    className
  );
};

export const getButtonProps = <T extends ButtonOwnProps>({
  variant = DEFAULT_VARIANT,
  size = DEFAULT_SIZE,
  icon,
  iconLeft,
  iconRight,
  children,
  isLoading,
  ...props
}: T) => {
  return {
    ...props,
    className: getButtonClassName({
      className: 'className' in props && typeof props.className === 'string' ? props.className : undefined,
      icon,
      iconLeft,
      iconRight,
      isLoading,
      size,
      variant,
    }),
    children: (
      <>
        {iconLeft && <Icon icon={iconLeft} size={mapButtonSizeToIconSize[size]} />}
        {children}
        {iconRight && <Icon icon={iconRight} size={mapButtonSizeToIconSize[size]} />}
      </>
    ),
  };
};

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props: ButtonProps, ref) {
  const buttonProps = getButtonProps(props);

  buttonProps satisfies Exact<
    SafeOmit<CoreButtonProps, 'loading'> & SafePick<ButtonOwnProps, 'isLoading'> & ButtonInheritedButtonProps,
    typeof buttonProps
  >;

  return (
    <CoreButton ref={ref} type={props.type ?? 'button'} {...buttonProps} loading={props.isLoading}>
      {props.isLoading && <Loader size={mapButtonSizeToLoaderSize[props.size ?? DEFAULT_SIZE]} />}
      <span className='btn--content'>{buttonProps.children}</span>
    </CoreButton>
  );
});