import { observer } from 'mobx-react';
import { Button, ButtonProps, ButtonStyles } from '../components/Button';
import { Popup } from '../components/popup/Popup';
import { View } from '../components/View';
import { PositionOptionsType } from '../utils/styles/getStylesForPosition';
import { useApphouse } from '../context/useApphouse';
import { ApphouseComponent } from '../components/component.interfaces';
import { CSSProperties } from 'glamor';
import { mergeStyles } from '../styles/mergeStyles';
import React from 'react';
import { PopupStyles } from '../components/popup/Popup.interface';

/**
 * Interface for a cookie banner action
 */
export interface CookieBannerAction extends Omit<ButtonProps, 'children'> {
  /**
   * The id of the action
   * must be unique
   */
  id: string;
  /**
   * Callback function to be executed when the cookie banner
   * button is clicked
   */
  action: () => void;
  /**
   * The label of the action
   */
  label: string;
}

export interface CookieBannerStyles {
  popup?: PopupStyles;
  container?: CSSProperties;
  button?: ButtonStyles;
}
/**
 * Interface for the cookie banner component
 */
export interface CookieBannerProps
  extends ApphouseComponent<CookieBannerStyles> {
  /**
   * The actions of the cookie banner
   */
  actions: CookieBannerAction[];
  /**
   * The content of the cookie banner
   */
  content: React.ReactNode;
  /**
   * The position of the cookie banner
   * @default 'bottom'
   * @optional
   */
  position?: keyof typeof PositionOptionsType;
  /**
   * Additional content to be rendered in the footer
   */
  additionalFooterContent?: React.ReactNode;
  /**
   * The content of the popup
   */
  children?: React.ReactNode;
  /**
   * If true, the popup will be cleared when it is closed
   */
  clear?: boolean;
  /**
   * If true, the popup will close when the user clicks outside of it
   */
  closeOnClickOutside?: boolean;
  /**
   * If true, the popup will be rendered in fullscreen
   */
  fullscreen?: boolean;
  /**
   * Unique id for the popup
   * and how it will be referenced in the store
   */
  id: string;
  /**
   * The title of the popup
   */
  title: React.ReactNode;
  /**
   * 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 unless user closes it via the actions
   * @optional
   * @default false
   */
  disableClosing?: boolean;
  /**
   * If true, the popup will allow clicks to pass through
   * and there will be no overlay
   */
  allowOverlayPassThrough?: boolean;
}

/**
 * ePrivacy Directive (The Cookie Law)
 * The Privacy and Electronic Communications Directive 2002/58/EC is a
 * set of rules passed in 2002 and amended in 2009 that govern data *
 *  protection and privacy in the EU.
 *
 * The ePD — or EU Cookie Law — requires that a website obtains its
 * user’s consent before storing cookies, other than those deemed
 * strictly * necessary, in the user’s browser.
 *
 * - General Data Protection Regulation (GDPR)
 *
 * - California Consumer Privacy Act (CCPA)
 *
 * - Information Commissioner’s Office (ICO)
 *
 * - Commission Nationale de L’informatique et des Libertés (CNIL)
 *
 * - Lei Geral de Protecao de Dados (LGPD)
 *
 * - Personal Information Protection and Electronic Documents Act (PIPEDA)
 *
 * - Personal Data Protection Act (PDPA)
 *
 * @returns Cookie Banner Template
 */
export const CookieBanner = observer((props: CookieBannerProps) => {
  const { actions, content, styleOverwrites, position, ...rest } = props;
  const {
    theme: {
      tokens: { spacings }
    }
  } = useApphouse();
  const localStyles = mergeStyles(
    {
      popup: {
        body: {
          container: {
            paddingTop: 0,
            paddingBottom: 0
          }
        },
        popup: {
          marginBottom: spacings.m
        }
      },
      container: { marginTop: spacings.m, marginBottom: spacings.m }
    },
    styleOverwrites
  );
  return (
    <Popup
      position={position}
      allowOverlayPassThrough={true}
      gutters={10}
      hideFooterActions
      hideFooter
      styleOverwrites={localStyles.popup}
      {...rest}
    >
      {content && <View>{content}</View>}
      <View justifyContent="flex-end" styleOverwrites={localStyles.container}>
        {actions.map((button) => (
          <Button
            key={button.id}
            variant={button.variant}
            onClick={() => {
              button.action();
            }}
            styleOverwrites={localStyles.button}
          >
            {button.label}
          </Button>
        ))}
      </View>
    </Popup>
  );
});