import React, { useMemo, useState, type ComponentProps, type ElementType, type ReactNode, type Ref } from 'react';
import { isPromise } from '@wener/utils';
import { clsx } from 'clsx';
import type { IntentType, SizeType } from '../const';
import { daisy, omitDaisyModifiers } from '../utils/daisy';

export type ButtonProps<E extends ElementType> = Omit<ComponentProps<E>, 'as'> & {
  as?: E;
  // 是否为激活状态
  active?: boolean;
  loading?: boolean;
  disabled?: boolean;
  outline?: boolean;
  ghost?: boolean;
  square?: boolean;
  circle?: boolean;
  block?: boolean;
  intent?: IntentType;
  size?: SizeType;
  children?: ReactNode;
};

export const Button = <E extends ElementType>({
  className,
  onClick,
  as,
  children,
  active,
  disabled,
  loading,
  ref,
  ...props
}: ButtonProps<E> & {
  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
}) => {
  const [isLoading, setLoading] = useState(false);
  const handleClick = useMemo(() => {
    if (!onClick) {
      return undefined;
    }
    setLoading(false);
    // if (onClick?.constructor.name === 'AsyncFunction') {
    const raw: Function = onClick;
    return (...args: any[]) => {
      const r = raw(...args);
      if (isPromise(r)) {
        setLoading(true);
        (r as Promise<any>).finally(() => {
          setLoading(false);
        });
      }
      return r;
    };
    // }
    // return onClick;
  }, [onClick]);

  const cs = clsx(
    // input
    // input-primary, input-secondary, input-success, input-danger, input-warning, input-info, input-light, input-dark
    // input-sm, input-lg, input-xs
    // loading loading-sm loading-lg loading-xs
    daisy('btn', props),
    active && 'btn-active',
    (loading || isLoading) && `loading ${daisy('loading', { size: props.size })}`,
    disabled && 'btn-disabled',
    className,
  );
  // 有 href 且 disabled 为 false 时，使用 a 标签
  const As: any = as || ('href' in props && !(props as any).disabled ? 'a' : 'button');
  return (
    <As className={cs} role={'button'} ref={ref as any} onClick={handleClick} {...omitDaisyModifiers(props)}>
      {children}
    </As>
  );
};