import { AnchorHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';

export type SwitchActiveColorOverwrite = 'Green' | 'Red' | 'Blue' | 'Orange';

export type SwitchActiveColorOverwriteType =
  | 'normal'
  | 'active'
  | 'border'
  | 'hover';

export type ButtonVariant =
  | 'primary-brand'
  | 'primary-neutral'
  | 'secondary-dark'
  | 'secondary-light'
  | 'switch'
  | 'transparent'
  | 'branded-twitter'
  | 'branded-pinterest';

export type ButtonProps = {
  title?: string;
  variant: ButtonVariant;
  size?: 'default' | 'small';
  type?: 'submit' | 'reset' | 'button';
  fullWidth?: boolean;
  disabled?: boolean;
  fontSize?: number;
  fontWeight?: number;
  uppercase?: boolean;
  as?: React.ElementType | keyof JSX.IntrinsicElements;
  href?: string;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  dataCy?: string;
  dataTestId?: string;
  width?: number;
  height?: number;
  margin?: [number, number, number, number];
  isLoading?: boolean;
  ref?: React.MutableRefObject<any>;
  icon?: (HTMLElement & SVGElement) | ReactNode;
  iconButton?: boolean;
  iconPosition?: 'left' | 'right';
  switchActive?: boolean;
  switchActiveColorOverwrite?: SwitchActiveColorOverwrite;
  padding?: string;
  border?: string;
  target?: string;
  rel?: string;
  togglesExpand?: boolean;
  toggleArrowPointsUp?: boolean;
};

export type TypographyVariants =
  | 'h1'
  | 'h2'
  | 'h3'
  | 'h4'
  | 'h5'
  | 'p1'
  | 'p2'
  | 'p3'
  | 'p4'
  | 'utility1'
  | 'utility2'
  | 'utility3'
  | 'utility4'
  | 'utility5';

export interface TypographyProps {
  as?: React.ElementType | keyof JSX.IntrinsicElements;
  margin?: [number, number, number, number];
  fontSize?: number;
  color?: string;
  lineHeight?: number;
  letterSpacing?: string;
  fontWeight?: number;
  maxWidth?: number;
  align?: string;
  variant?: TypographyVariants;
  bold?: boolean;
  htmlFor?: string;
  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
}

export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
  variant: 'default' | 'inline';
  color?: 'neutral' | 'brand' | 'danger' | 'light';
  fontSize?: number;
  fontWeight?: number;
  uppercase?: boolean;
  margin?: [number, number, number, number];
  underlined?: boolean;
  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
  dataCy?: string;
  dataTestId?: string;
  ref?: React.MutableRefObject<any>;
};

export type InputFieldProps = InputHTMLAttributes<HTMLInputElement> & {
  name: string;
  label?: string;
  variant: 'normal' | 'multiline';
  iconLeft?: (HTMLElement & SVGElement) | ReactNode;
  iconRight?: (HTMLElement & SVGElement) | ReactNode;
  characterLimit?: number;
  fullWidth?: boolean;
  withEmojis?: boolean;
  isBottom?: boolean;
  margin?: [number, number, number, number];
  fontSize?: number;
  fontWeight?: number;
  dataCy?: string;
  dataTestId?: string;
  errorMessage?: string;
  errorDataCy?: string;
  errorTestId?: string;
  setFieldValue?: (field: string, value: any, shouldValidate?: boolean) => void;
  onChange?: (
    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
  ) => void;
  firstInGroup?: boolean;
  lastInGroup?: boolean;
  infoTip?: string;
};

export interface BadgeProps {
  title: string;
  setSelected: () => void;
  isSelected?: boolean;
  variant?: BadgeVariant;
}

export enum BadgeVariant {
  FILLED = 'FILLED',
  OUTLINED = 'OUTLINED',
}

// Modal Types
export type ModalType =
  | 'DELETE_WORKSPACE'
  | 'ADD_NEW_CANVAS'
  | 'SHARE_CANVAS'
  | 'REMIX_WORKSPACES'
  | 'DELETE_CANVAS'
  | 'DESKTOP_ONLY';

export type StateModal = {
  isOpen: boolean;
  modalType: ModalType;
  workspaceId?: string;
  downloadImage?: (
    download?: boolean | undefined,
    navigateToDashboard?: boolean | undefined
  ) => Promise<void> | undefined;
  canvasUrl?: string;
  thumbnail?: string | undefined;
  workspaceTitle?: string;
  handleCreateWorkspace?: () => Promise<boolean | undefined>;
  username?: string;
  canvasId?: string;
  canvasTitle?: string;
  canvasThumbnail?: string;
};

export type ModalActions = StateModal & {
  type: 'SET_MODAL';
};

export type DispatchModal = (action: ModalActions) => void;

export type TimerProps = {
  currentTime: number;
};

export type ItemMiniCardProps = {
  itemSrc: string;
  onClick?: () => void;
  itemName?: string;
  itemUsername?: string;
  isFavorite?: boolean;
  onFavoriteClick?: () => void;
  showFavorite?: boolean;
  favoriteCount?: number;
};