import { useEditorVariableChecks } from '@hubspot/cms-components';
import styles from './index.module.scss';
import Icon from '../Icon/index.js';
import ContentFields from './ContentFields.js';
import StyleFields from './StyleFields.js';
import cx from '../utils/classname.js';
import {
  ButtonProps,
  ButtonAsButtonProps,
  ButtonAsLinkProps,
  BaseButtonProps,
  RenderWithIconProps,
} from './types.js';

const ButtonComponent = ({
  buttonType = 'link',
  variant = 'primaryButton',
  className = '',
  style = {},
  ...rest
}: ButtonProps) => {
  const editorChecks = useEditorVariableChecks();
  const isInEditor = editorChecks.is_in_editor;
  const defaultClasses = cx(
    styles.button,
    isInEditor && styles.inEditor,
    className
  );
  const sharedProps = {
    className: defaultClasses,
    style: style,
    'data-button-variant': variant,
  };

  const RenderWithIcon = ({
    iconFieldPath,
    showIcon,
    iconPurpose,
    iconTitle,
    iconPosition = 'right',
    children,
  }: RenderWithIconProps) => {
    if (!iconFieldPath || !showIcon) {
      return (
        <span
          className={cx(
            isInEditor && styles.textWrapper,
            isInEditor && styles.textWrapperNoIcon
          )}
        >
          {children}
        </span>
      );
    }

    const icon = (
      <Icon
        fieldPath={iconFieldPath}
        showIcon={showIcon}
        purpose={iconPurpose}
        title={iconTitle}
      />
    );

    return (
      <>
        {iconPosition === 'left' && icon}
        <span className={cx(isInEditor && styles.textWrapper)}>{children}</span>
        {iconPosition === 'right' && icon}
      </>
    );
  };

  const renderButton = ({
    onClick,
    disabled = false,
    children,
    iconPosition = 'right',
    iconFieldPath,
    showIcon,
    iconPurpose,
    iconTitle,
    ...rest
  }: Omit<ButtonAsButtonProps, 'buttonType'> & Partial<BaseButtonProps>) => {
    const iconProps = {
      iconFieldPath,
      showIcon,
      iconPurpose,
      iconTitle,
      iconPosition,
    };
    return (
      <button {...sharedProps} onClick={onClick} disabled={disabled} {...rest}>
        <RenderWithIcon {...iconProps}>{children}</RenderWithIcon>
      </button>
    );
  };

  const renderLink = ({
    href = '',
    target = '_self',
    rel = '',
    children,
    iconPosition = 'right',
    iconFieldPath,
    showIcon,
    iconPurpose,
    iconTitle,
    ...rest
  }: Omit<ButtonAsLinkProps, 'buttonType'> & Partial<BaseButtonProps>) => {
    const iconProps = {
      iconFieldPath,
      showIcon,
      iconPurpose,
      iconTitle,
      iconPosition,
    };
    return (
      <a {...sharedProps} href={href} target={target} rel={rel} {...rest}>
        <RenderWithIcon {...iconProps}>{children}</RenderWithIcon>
      </a>
    );
  };

  // TypeScript properly discriminates based on buttonType
  if (buttonType === 'button') return renderButton(rest);

  // For link variant
  return renderLink(rest);
};

// Create compound component with proper typing
type ButtonComponentType = typeof ButtonComponent & {
  ContentFields: typeof ContentFields;
  StyleFields: typeof StyleFields;
};

const Button = ButtonComponent as ButtonComponentType;
Button.ContentFields = ContentFields;
Button.StyleFields = StyleFields;

export default Button;
