import { observer } from 'mobx-react';
import { useApphouse } from '../../context/useApphouse';
import { Button } from '../Button';
import { css } from 'glamor';
import { PopupFooterProps, PopupFooterStyles } from './Popup.interface';
import { useLocalStyles } from '../../styles/defaults/useLocalStyles';
import { omit } from '../../utils/obj/omit';
import React, { ForwardedRef } from 'react';
import { merge } from '../../utils/obj/merge';

/**
 * A component that renders a popup footer
 * DO NOT EXPORT THIS COMPONENT, ONLY FOR INTERNAL USE.
 * Must export the observer version of this component available
 * at the bottom of this file.
 */
const PopupFooterComponent = React.forwardRef(
  (props: PopupFooterProps, ref: ForwardedRef<HTMLElement>) => {
    const {
      cancel,
      confirm,
      styleOverwrites,
      additionalFooterContent = null,
      hideFooterActions = false,
      hideFooter = false,
      disableClosing = false,
      actions,
      stickyFooter,
      children,
      id
    } = props;

    const {
      theme: { tokens }
    } = useApphouse();

    const footerStyles: PopupFooterStyles = {
      container: stickyFooter ? { position: 'sticky', bottom: 0 } : {},
      footerLeft: hideFooterActions
        ? {
            width: '100%'
          }
        : {}
    };

    const componentStyles = merge(
      {},
      {
        container: {
          backgroundColor: 'inherit',
          borderBottomLeftRadius: 'inherit',
          borderBottomRightRadius: 'inherit',
          boxShadow: 'inherit',
          boxSizing: 'border-box',
          color: 'inherit',
          display: 'flex',
          gridGap: tokens.spacings.m,
          justifyContent: 'space-between',
          paddingBottom: tokens.spacings.m,
          paddingLeft: tokens.spacings.m,
          paddingRight: tokens.spacings.m,
          paddingTop: tokens.spacings.m,
          width: '-webkit-fill-available'
        },
        footerLeft: {
          boxSizing: 'border-box',
          display: 'flex',
          justifyContent: 'flex-start',
          alignItems: 'center',
          gridGap: tokens.spacings.m
        },
        footerRight: {
          boxSizing: 'border-box',
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
          gridGap: tokens.spacings.m
        },
        btnCancel: {
          fontWeight: 700
        },
        btnConfirm: {}
      },

      footerStyles
    );

    const localStyles = useLocalStyles<PopupFooterStyles>(
      componentStyles,
      styleOverwrites
    );

    if (hideFooter) {
      return null;
    }

    if (
      !actions &&
      !confirm &&
      !cancel &&
      !children &&
      !additionalFooterContent
    ) {
      return null;
    }

    return (
      <footer
        ref={ref}
        id={`${id}-footer`}
        data-xray="PopupFooter"
        data-style="footer"
        {...css(localStyles.container)}
      >
        <div {...css(localStyles.footerLeft)} data-style="footerLeft">
          {children}
          {additionalFooterContent}
        </div>
        {!hideFooterActions && (
          <div {...css(localStyles.footerRight)} data-style="footerRight">
            {actions?.map((action, index) => {
              return (
                <Button key={`footer-${id}-${index}-${action.id}`} {...action}>
                  {action.label}
                </Button>
              );
            })}
            {!disableClosing && cancel && (
              <Button
                variant="secondary"
                {...omit(cancel, ['onClick', 'disabled', 'styleOverwrites'])}
                onClick={(e) => {
                  cancel && cancel.onClick && cancel.onClick(e);
                }}
                data-style="btnCancel"
                disabled={cancel?.disabled || disableClosing}
                styleOverwrites={localStyles.btnCancel}
              >
                {cancel?.label}
              </Button>
            )}
            {confirm && (
              <Button
                variant="primary"
                {...omit(confirm, ['onClick', 'disabled', 'styleOverwrites'])}
                disabled={confirm.disabled || disableClosing}
                onClick={(e) => {
                  if (confirm.disabled !== false) {
                    confirm && confirm.onClick && confirm.onClick(e);
                  }
                }}
                data-style="btnConfirm"
                styleOverwrites={localStyles.btnConfirm}
              >
                {confirm && confirm.label}
              </Button>
            )}
          </div>
        )}
      </footer>
    );
  }
);

export const PopupFooter = observer(PopupFooterComponent);