import React from 'react';
import { CSSProperties } from 'glamor';
import { ApphouseComponent } from '../component.interfaces';
import { PositionOptionsType } from '../../utils/styles/getStylesForPosition';
import { ButtonProps } from '../Button';

/**
 * Interface for the Popup Footer component
 */
export interface PopupFooterStyles {
  container?: CSSProperties;
  footerLeft?: CSSProperties;
  footerRight?: CSSProperties;
  btnCancel?: CSSProperties;
  btnConfirm?: CSSProperties;
}

/**
 * Interface for the Popup Header component styles
 */
export interface PopupHeaderStyles {
  container?: CSSProperties;
  title?: CSSProperties;
  headerIcon?: CSSProperties;
}

/**
 * Interface for the Popup Body component
 */
export type PopupBodyStyles = {
  container?: CSSProperties;
  content?: CSSProperties;
};

/**
 * Interface for the Popup component styles
 */
export interface PopupStyles {
  /**
   * Styles applied on the overlay, the div that covers the entire screen
   * behind the popup
   */
  overlay?: CSSProperties;
  popup?: CSSProperties;
  container?: CSSProperties;
  header?: PopupHeaderStyles;
  body?: PopupBodyStyles;
  footer?: PopupFooterStyles;
  closeButton?: CSSProperties;
}

/**
 * Interface for the Popup Header component
 */
export interface PopupHeaderProps extends ApphouseComponent<PopupHeaderStyles> {
  /**
   * If provided, the popup will be rendered with this icon
   *
   */
  headerIcon?: React.ReactNode;
  /**
   * The title of the popup
   */
  title?: React.ReactNode;

  /**
   * If true, the header bottom border will be removed
   * @optional
   * @default false
   */
  clear?: boolean;
  /**
   * If true, the header will be hidden
   */
  hideHeader?: boolean;
}

/**
 * Interface for an action button in the Popup
 */
export interface ActionButtonType extends ButtonProps {
  label: React.ReactNode;
}

/**
 * Interface for props to be passed to the Popup Footer component
 */
export interface PopupFooterProps {
  /**
   * If true, the footer actions will not display
   * and the cancel and confirm button won't show.
   * @optional
   * @default false
   */
  hideFooterActions?: boolean;
  /**
   * If true, the entire footer will not show.
   * @optional
   * @default false
   */
  hideFooter?: boolean;
  /**
   * Unique id for the popup
   * @required
   */
  id: string;
  /**
   * If true, the popup will not be closable
   * @optional
   * @default false
   */
  disableClosing?: boolean;
  /**
   * If true, the popup will be rendered with a sticky footer.
   * This means that the footer will always be visible at the bottom of the popup
   * in a fixed position.
   * @optional
   * @default false
   */
  stickyFooter?: boolean;
  /**
   * Additional actions to be rendered in the footer.
   * They will be rendered to the left of the cancel and confirm buttons when provided.
   * @optional
   */
  actions?: ActionButtonType[];
  /**
   * Settings for the cancel button
   */
  cancel?: ActionButtonType;
  /**
   * Settings for the confirm button
   */
  confirm?: ActionButtonType;
  /**
   * Additional content to be rendered in the footer.
   * If actions are present it renders to the left of the footer.
   * If no actions are present it renders full width.
   */
  additionalFooterContent?: React.ReactNode;
  /**
   * Overwrite styles for the footer
   */
  styleOverwrites?: PopupFooterStyles;
  /**
   * if provided it will be added in addition to the default footer
   */
  children?: React.ReactNode;
}

export interface PopupProps
  extends ApphouseComponent<PopupStyles>,
    Omit<PopupHeaderProps, 'styleOverwrites' | 'gutters'>,
    Omit<
      PopupFooterProps,
      'styleOverwrites' | 'clear' | 'disableClosing' | 'gutters'
    > {
  /**
   * The content of the popup
   */
  children?: React.ReactNode;

  /**
   * If true, the popup will close when the user clicks outside of it
   */
  closeOnClickOutside?: boolean;
  /**
   * If true, the popup will be rendered in fullscreen
   * @optional
   * @default false
   */
  fullscreen?: boolean;
  /**
   * If true, the popup will be rendered with a close button
   * that will be rendered in the top right corner
   * that will close the popup when clicked
   * @optional
   * @default false
   */
  showCloseButton?: boolean;
  /**
   * The width of the popup
   */
  width?: string;
  /**
   * If true, the popup will not be closable
   * @optional
   * @default false
   */
  disableClosing?: boolean;
  /**
   * If true, the popup will allow clicks to pass through
   * and there will be no overlay
   */
  allowOverlayPassThrough?: boolean;
  /**
   * The position of where the popup will be displayed on the page
   * @optional
   * @default 'center'
   */
  position?: keyof typeof PositionOptionsType;
}