import { ToastPosition } from "react-toastify";
import {
  CSSProperties,
  ChangeEvent,
  ChangeEventHandler,
  MouseEventHandler,
  ReactNode,
} from "react";
import { SfSyncConfigListExpanded, SfSyncSettings, SizeLevel } from "./global";
import { ReactElement } from "@wordpress/element/build-types/serialize";
import { ScopeOption } from "./global";

/**
 * Contexts
 */

export interface SettingsProviderProps {
  children: ReactNode;
}

export interface SettingsContextProps {
  initialSettings: SfSyncSettings;
  setInitialSettings: React.Dispatch<React.SetStateAction<SfSyncSettings>>;
  emptyConfigList: boolean;
  homeURLs: Record<string, string>;
  showNotification: (
    type: "error" | "success",
    message: string,
    position?: ToastPosition,
    autoClose?: number
  ) => void;
  isSwitchingConfig: boolean;
  scopeOptions: ScopeOption[];
  handleChangeSelection: (id: string) => void;
}

export interface ViewModeProviderProps {
  children: ReactNode;
}

export interface ViewModeContextProps {
  isMobileView: boolean;
  isRTL: boolean;
}

export interface GridManagerProviderProps {
  children: ReactNode;
}

export interface GridManagerContextProps {
  filters: {
    media_type: string;
    link_status: string;
  };
  setFilters: React.Dispatch<
    React.SetStateAction<{
      media_type: string;
      link_status: string;
    }>
  >;
}
export interface NavigationProviderProps {
  children: ReactNode;
}
export interface NavigationContextProps {
  isNavBlocked: boolean;
  setIsNavBlocked: React.Dispatch<React.SetStateAction<boolean>>;
}

export interface SiteStatusProviderProps {
  children: ReactNode;
}

export interface SiteStatusContextProps {
  isDisabled: boolean;
  disabledSince: number | null;
  refreshSiteStatus: () => Promise<void>;
}

/**
 * Components
 */
export interface ContentCardProps {
  title?: string;
  description?: string;
  meta?: string;
  imageSrc: string;
  imageAlign?: string;
  tags?: Array<InfoBadgeProps>;
  actionButtons?: Array<ButtonProps>;
  maxWidth?: string;
  overlayContent?: ReactNode;
  hoverEffect?: boolean;
  onHoverContent?: ReactNode;
  stickContent?: boolean;
}

export interface InfoBadgeProps {
  text?: string;
  icon?: any;
  style?: CSSProperties;
  tooltip?: TooltipProps;
}

export interface SelectOption {
  text: string;
  value: string;
  icon?: ReactNode;
  iconPosition?: "start" | "end";
}

export interface SelectProps {
  id?: string;
  name: string;
  defaultValue?: string;
  placeholder?: string;
  value: string | null;
  onChange?: (name: string, value: string) => void;
  disabled?: boolean;
  label?: string;
  options?: SelectOption[];
  multiple?: boolean;
  onClear?: () => void;
  iconStart?: ReactNode;
  externalShowOptions?: boolean;
  handleSelectAll?: () => void;
}

export interface OptionProps {
  id?: string;
  value: string;
  text: string;
  onClick: (value: string) => void;
  selected?: boolean;
  hasCheckbox?: boolean;
  icon?: ReactNode;
  meta?: ReactNode;
  action?: {
    text: string;
    url: string;
  };
  isDestructive?: boolean;
  iconPosition?: "start" | "end";
  secondIcon?: ReactNode;
}

export interface UpgradePopoverProps {
  open: boolean;
  children?: ReactNode;
  content?: ReactNode;
  onOpenChange?: (isOpen: boolean) => void;
}

export interface ButtonProps {
  id?: string;
  onClickHandler?: MouseEventHandler<HTMLButtonElement>;
  text?: string;
  type?: "button" | "submit" | "reset" | "link";
  disabled?: boolean;
  variant?: "tertiary" | "secondary" | "ghost";
  isDestructive?: boolean;
  isLoading?: boolean;
  icon?: ReactNode;
  iconPosition?: "start" | "end";
  shape?: "boxy" | "rounded" | "circular";
  style?: CSSProperties;
  size?: "md" | "lg";
  collapse?: boolean;
  href?: string;
  target?: "_blank" | "_self" | "_parent" | "_top";
}

export interface IconButtonProps {
  id?: string;
  onClickHandler?: MouseEventHandler<HTMLButtonElement>;
  disabled?: boolean;
  isDestructive?: boolean;
  icon?: ReactNode;
  color?: "default" | "primary" | "secondary";
  size?: SizeLevel;
}

export interface CardProps {
  id?: string;
  style?: CSSProperties;
  elevation?: SizeLevel | false;
  children?: ReactNode;
  onClick?: MouseEventHandler<HTMLDivElement>;
}

export interface CardContentProps {
  padding?: SizeLevel;
  children?: ReactNode;
}

export interface CardFooterProps {
  padding?: SizeLevel;
  children?: ReactNode;
}

export interface CardHeaderProps {
  padding?: SizeLevel;
  title: string;
  subtitle?: string | ReactNode;
  actionButtons?: ButtonProps[];
  backButton?: {
    size?: SizeLevel;
    onClick?: () => void;
  };
}

export interface CardSectionProps {
  padding?: SizeLevel;
  children?: ReactNode;
  sectionID?: string;
  sectionTitle?: string;
  sectionSubtitle?: string;
  sectionButton?: ButtonProps;
}

export interface InputFieldProps {
  containerID?: string;
  name?: string;
  type?: string;
  label?: string;
  placeholder?: string;
  isRow?: boolean;
  value: string;
  onChange: (name: string, value: string) => void;
  errorMessage?: string;
  description?: string | ReactNode;
  concatenatedString?: string;
  autoComplete?: string;
  autoCorrect?: string;
  spellCheck?: boolean;
  disabled?: boolean;
  onBlur?: () => void;
  onFocus?: () => void;
}

export interface NavItemProps {
  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
  icon?: ReactNode;
  text: string;
  to?: string;
  disabled?: boolean;
}

export interface NumberInputProps {
  id: string;
  name: string;
  label: string;
  disabled?: boolean;
  value: string | null | undefined;
  placeholder?: string;
  min?: number;
  max?: number;
  onChange: (name: string, value: number | null) => void;
}

export interface SidebarNavigationProps {
  isMobileView: boolean;
}

export interface TooltipProps {
  text?: string | ReactNode;
  width?: string;
  gap?: number;
  children?: ReactNode;
}

export interface SkeletonProps {
  width?: string;
  height?: string;
  variant?: "square" | "circular" | "rectangle";
}

export interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  modalActions?: ButtonProps[];
  children?: ReactNode;
}

export interface CheckboxProps {
  name?: string;
  id?: string;
  onChange: () => void;
  checked: boolean;
  indeterminate?: boolean;
  label?: string;
}

export interface EmptyStateProps {
  icon?: ReactNode;
  title?: string;
  subtitle?: string | ReactNode;
  children?: ReactNode;
}

export interface SearchProps {
  inputProps: InputFieldProps;
  items: OptionProps[];
  isLoading: boolean;
}

export interface ConfigurationDetailProps {
  addNew?: boolean;
}

export interface MenuOption {
  label: string;
  icon?: ReactNode;
  onClick: () => void;
  isDestructive?: boolean;
}

export interface MenuProps {
  id?: string;
  children?: ReactNode;
  options?: Array<MenuOption>;
  open?: boolean;
  onClose?: () => void;
}

export interface RadioProps {
  name?: string;
  id?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  value?: string;
  checked?: boolean;
  label?: string;
  size?: SizeLevel;
  icons?: {
    checkedIcon?: ReactNode;
    uncheckedIcon?: ReactNode;
  };
}

export interface InteractiveCardMetaItem {
  label: string;
  value: string | JSX.Element;
}

export interface InteractiveCard {
  title: string;
  image?: string;
  biography?: string;
  metaData?: Array<InteractiveCardMetaItem>;
  selected?: boolean;
  onSelect?: ChangeEventHandler<HTMLInputElement>;
  onClick?: MouseEventHandler<HTMLDivElement>;
  options?: Array<MenuOption>;
  isLoading?: boolean;
  hasRadio?: boolean;
}

export interface InfiniteScrollItem {
  id: any;
  [key: string]: any;
}

export interface InfiniteScrollProps {
  items: Array<InfiniteScrollItem>;
  itemsToShow: number;
  renderItem: (item: InfiniteScrollItem) => React.ReactNode;
}

export interface AvatarProps {
  alt?: string;
  classes?: string[];
  src?: string;
  size?: "sm" | "md" | "lg";
  placeholderIcon?: ReactElement;
}

export interface FieldInfo {
  label?: string;
  description?: string;
}

export interface SocialIconsProps {
  id?: string;
  image_url?: string;
  action_url?: string;
  onClickHandler?: MouseEventHandler<HTMLAnchorElement>;
}

export interface CustomizableHeaderProps {
  fieldInfo?: FieldInfo;
  avatar?: AvatarProps;
  inputField?: InputFieldProps;
  actionButton?: ButtonProps;
  title?: string;
  isEditable?: boolean;
  onUpdateImage?: MouseEventHandler<HTMLButtonElement>;
  onRemoveImage?: MouseEventHandler<HTMLButtonElement>;
  classes?: string[];
  headerLink?: string;
  onRemoveSocialIcon?: (index: number) => void;
  socialIcons?: Array<SocialIconsProps>;
  onSocialIconClick?: (index: number) => void;
}

export interface ColorPickerProps {
  name: string;
  label?: string;
  placeholder?: string;
  value: string;
  onChange?: (name: string, value: string) => void;
}

export interface CTACardProps {
  variant?: string;
  imageSrc: string;
  title: string;
  description?: string;
  tag?: string;
  meta?: string;
  onClick?: MouseEventHandler<HTMLDivElement>;
  hoverEffect?: boolean;
  dimmed?: boolean;
  actionButtons?: Array<ButtonProps>;
  showActionButtons?: boolean;
  scaleDown?: boolean;
  score?: string;
  type?: string;
}
export interface TagProps {
  label: string;
  color?: string;
  textColor?: string;
}


export interface PageFooterProps {
  title?: string;
  icon?: ReactNode;
  subtitle?: string;
  actionButton?: ButtonProps;
  mode?: string;
}

export interface ToggleProps {
  defaultValue?: string;
  onChange: (value: string) => void;
  options: Array<ToggleOption>;
  disabled?: boolean;
  isLoading?: boolean;
  label?: string;
  icon?: React.ReactNode;
}

export interface ToggleOption {
  label: string;
  value: string;
  icon?: React.ReactNode;
}