import {
  LinkFieldDefaults,
  TextFieldDefaults,
} from '@hubspot/cms-components/fields';
import { IconContentFieldsWithToggleProps } from '../Icon/types.js';

export type IconPositionHorizontal = 'left' | 'right';

// Base props shared by all variants
export type BaseButtonProps = {
  variant?: 'primaryButton' | 'secondaryButton' | 'tertiaryButton' | 'accentButton';
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
  iconFieldPath?: string;
  iconPosition?: IconPositionHorizontal;
  iconSize?: number;
  showIcon?: boolean;
  iconPurpose?: 'SEMANTIC' | 'DECORATIVE';
  iconTitle?: string;
};

// Button variant props - requires onClick handler, renders <button> element
// Use this variant when interactive behavior is needed (must be used with JS islands)
export type ButtonAsButtonProps = BaseButtonProps & {
  buttonType: 'button';
  onClick?: () => void;
  disabled?: boolean;
};

// Link variant props - renders <a> element
// Use this variant for navigation without JavaScript
export type ButtonAsLinkProps = BaseButtonProps & {
  buttonType: 'link';
  href?: string;
  target?: '_self' | '_blank' | '_parent' | '_top';
  rel?: string;
};

// Main component props using discriminated union
// TypeScript will provide intelligent autocomplete based on buttonType
export type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;

export type ContentFieldsProps = Omit<
  IconContentFieldsWithToggleProps,
  'addIconToggle'
> & {
  buttonTextLabel?: string;
  buttonTextName?: string;
  buttonTextDefault?: typeof TextFieldDefaults;
  buttonLinkLabel?: string;
  buttonLinkName?: string;
  buttonLinkDefault?: typeof LinkFieldDefaults;
  showButtonLink?: boolean;
};

export type StyleFieldsProps = {
  buttonVariantLabel?: string;
  buttonVariantName?: string;
  buttonVariantDefault?: { variant_name: string };
  buttonIconPositionLabel?: string;
  buttonIconPositionName?: string;
  buttonIconPositionDefault?: IconPositionHorizontal;
};

export type RenderWithIconProps = Pick<
  ButtonProps,
  | 'iconFieldPath'
  | 'iconSize'
  | 'showIcon'
  | 'iconPurpose'
  | 'iconTitle'
  | 'iconPosition'
> & {
  children: React.ReactNode;
};
