import { observer } from 'mobx-react';
import { Popup } from '../components/popup/Popup';
import { NavigationList } from '../components/NavigationList';
import { View } from '../components/View';
import {
  PaginationProps,
  Pagination,
  PaginationStyles
} from '../components/Pagination';
import {
  NavigationListProps,
  NavigationListStyles
} from '../components/NavigationList';
import React from 'react';
import { ApphouseComponent } from '../components/component.interfaces';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';
import { PopupProps, PopupStyles } from '../components/popup/Popup.interface';
import { omit } from '../utils/obj/omit';
import { merge } from '../utils/obj/merge';
import { useApphouse } from '..';
import { css } from 'glamor';

interface PopupWithPaginationStyles {
  popup?: PopupStyles;
  navigation?: NavigationListStyles;
  pagination?: PaginationStyles;
}

interface PopupWithPaginationProps
  extends Omit<
      PopupProps,
      | 'styleOverwrites'
      | 'additionalFooterContent'
      | 'hideFooterActions'
      | 'hideFooter'
      | 'stickyFooter'
    >,
    ApphouseComponent<PopupWithPaginationStyles> {
  /**
   * The content of the popup.
   */
  children: React.ReactNode;
  /**
   * The pagination props.
   * if not provided, the pagination will not be shown.
   * @optional
   */
  pagination?: PaginationProps;
  /**
   * The navigation props.
   * if not provided, the navigation will not be shown.
   * @optional
   */
  navigation?: NavigationListProps;
}

export const PopupWithPagination = observer(
  (props: PopupWithPaginationProps) => {
    const {
      children,
      pagination,
      navigation,
      styleOverwrites,

      ...popupUpProps
    } = props;
    const {
      theme: { tokens, colors }
    } = useApphouse();
    const { spacings, radius } = tokens;
    const localStyles = useLocalStyles<PopupWithPaginationStyles>(
      {
        popup: {},
        navigation: {},
        pagination: {}
      },
      styleOverwrites
    );
    const popupStyles = merge({}, localStyles.popup, {
      header: {
        title: {
          paddingLeft: `${spacings.m}px`
        }
      },
      footer: {
        footerLeft: {
          width: '100%',
          boxSizing: 'border-box'
        }
      }
    });
    const borderRadius = radius.default;
    const FooterContent = pagination ? (
      <View orientation="vertical">
        <Pagination {...pagination} styleOverwrites={localStyles.pagination} />
      </View>
    ) : null;
    const navigationWidth = navigation ? '200px' : '0px';
    const footerHeight = pagination ? '160px' : '0px';
    const navigationStyles = localStyles.navigation;
    return (
      <Popup
        hideFooterActions
        hideFooter={pagination ? false : true}
        styleOverwrites={popupStyles}
        additionalFooterContent={FooterContent}
        fullscreen={false}
        {...omit(popupUpProps, [
          'styleOverwrites',
          'additionalFooterContent',
          'hideFooterActions',
          'hideFooter'
        ])}
        stickyFooter
      >
        <div
          {...css({
            position: 'relative',
            display: 'flex',
            boxSizing: 'border-box',
            width: '100%'
          })}
        >
          {navigation && (
            <View
              orientation="vertical"
              styleOverwrites={{
                width: navigationWidth,
                position: 'absolute',
                overflowY: 'auto',
                paddingBottom: footerHeight,
                justifyContent: 'start',
                alignItems: 'flex-start'
              }}
            >
              <NavigationList
                {...navigation}
                styleOverwrites={navigationStyles}
              />
            </View>
          )}
          <View
            styleOverwrites={{
              backgroundColor: colors.surface,
              boxSizing: 'border-box',
              color: colors.onSurface,
              padding: `${spacings.xxl}px`,
              marginLeft: navigationWidth,
              width: 'inherit',
              justifyContent: 'start',
              alignItems: 'flex-start',
              borderRadius: navigation
                ? `0 ${borderRadius} ${borderRadius} 0`
                : borderRadius
            }}
          >
            {children}
          </View>
        </div>
      </Popup>
    );
  }
);