import { IconDefinition } from './typings';

export const ArrowRightIcon: IconDefinition = {
  name: 'arrow-right',
  definition: {
    svg: {
      viewBox: '0 0 24 24',
    },
    path: {
      fill: 'currentColor',
      fillRule: 'evenodd',
      stroke: 'none',
      strokeWidth: 1,
      d: 'M13.8 6.8l5.198 5.198-5.198 5.198-1.06-1.06 3.384-3.386H5v-1.5h11.131L12.74 7.86 13.8 6.8z',
    },
  },
};

export interface IconDefinition {
  name: string;
  definition: {
    svg?: {
      viewBox?: string;
    };
    path?: {
      d?: string;
      fill?: string;
      fillRule?: 'nonzero' | 'evenodd' | 'inherit';
      stroke?: string;
      strokeWidth?: string | number;
      transform?: string;
    };
  };
}

// 概念：先繼承原生的 Button Props 再來擴充需要的 Props
export interface ButtonProps extends Omit<React.ComponentPropsWithRef<'button'>, 'prefix'> {
  color?: ButtonColorType;
  error?: boolean;
  disabled?: boolean;
  loading?: boolean;
  prefix?: ReactNode;
  size?: Size;
  suffix?: ReactNode;
  variant?: ButtonVariantType;
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
  const {
    children,
    color = 'primary',
    error = false,
    disabled = false,
    loading = false,
    onClick,
    prefix: prefixProp,
    size = 'medium',
    suffix: suffixProp,
    variant = 'text',
    style,
    ...rest
  } = props;

  let prefix: ReactNode = prefixProp;
  let suffix: ReactNode = suffixProp;

  // 處理情境
  if (loading) {
    const loadingIcon = <Icon icon={SpinnerIcon} spin />;

    if (suffix && !prefix) {
      suffix = loadingIcon;
    } else {
      prefix = loadingIcon;
    }
  }

  const asIconBtn = children == null && !!(prefix || suffix);


  // 處理樣式 (CSS)
  const buttonColorClass = useMemo(() => {
    if (disabled) return Color['disabled'];
    if (error) return Color['error'];
    if (color) return Color[color];
  }, [color, disabled, error]);

  const padding = useMemo(() => {
    if (asIconBtn) return 'px-0';

    if (size === 'small') return 'px-3';

    return 'px-4';
  }, [asIconBtn, size]);

  const iconClass = useMemo(() => size === 'small' ? "text-lg" : "text-2xl", [size]);

  const variantClass = useMemo(() => {
    if (variant === 'contained') return `text-white ${ButtonVariant[variant]}-${buttonColorClass}`;

    if (variant === 'outlined') return `border-2 text-${buttonColorClass} ${ButtonVariant[variant]}-${buttonColorClass}`;

    return `${ButtonVariant[variant]}-${buttonColorClass}`;
  }, [buttonColorClass, variant]);

  const disabledClass = useMemo(() => disabled ? "opacity-40 cursor-not-allowed" : "hover:opacity-60", [disabled]);
  const loadingClass = useMemo(() => loading ? "cursor-default pointer-events-none" : "", [loading]);

  // HTML Structure
  return (
    <button
      {...rest}
      ref={ref}
      aria-disabled={disabled}
      className={`relative box-border flex-center flex-shrink-0 gap-1 m-0 rounded cursor-pointer select-none whitespace-nowrap uppercase focus:outline-none ${padding} ${iconClass} ${variantClass} ${disabledClass} ${loadingClass}`}
      style={style}
      disabled={disabled}
      onClick={(event: MouseEvent<HTMLButtonElement>) => {
        if (!disabled && !loading && onClick) {
          onClick(event);
        }
      }}
    >
      {prefix}
      {children && <span className={`${size ? ButtonSize[size] : ""}`}>{children}</span>}
      {suffix}
    </button>
  );
});

export default Button;

describe('<Switch />', () => {
  // 1.
  describeForwardRefToHTMLElement(
    HTMLSpanElement,
    (ref) => render(<Switch ref={ref} />),
  );

 // 2.
  describeHostElementClassNameAppendable(
    'foo',
    (className) => render(<Switch className={className} />),
  );
  
  describe('prop: checked', () => { 
   	 // 3.
	 [false, true].forEach((checked) => {
        const message = checked
          ? 'should be checked if checked=true'
          : 'should be unchecked if checked=false';

        it(message, () => {
          const { getHostHTMLElement } = render(<Switch checked={checked} />);
          const element = getHostHTMLElement();
          const [inputElement] = element.getElementsByTagName('input');

          testChecked(element, inputElement, checked);
        });
      });
   };
 };