import { observer } from 'mobx-react';
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 { useApphouse } from '..';
import { CSSProperties, css } from 'glamor';

interface PageBodyStyles {
  title?: CSSProperties;
  content?: CSSProperties;
  container?: CSSProperties;
}
interface PageWithPaginationStyles {
  container?: CSSProperties;
  navigation?: NavigationListStyles;
  pagination?: PaginationStyles;
  body?: PageBodyStyles;
}

interface PageWithPaginationProps
  extends ApphouseComponent<PageWithPaginationStyles> {
  /**
   * The title of the Page
   * @optional
   */
  title?: React.ReactNode;
  /**
   * 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;
  /**
   * The width of the left panel.
   * @optional
   * @default 200
   * @example 200
   */
  navigationWidth?: number;
}

export const PageWithPagination = observer((props: PageWithPaginationProps) => {
  const {
    children,
    navigationWidth: leftPanelWidth = 200,
    pagination,
    gutters,
    navigation,
    styleOverwrites,
    title
  } = props;
  const {
    app: {
      layout: { windowWidth }
    },
    theme: { tokens, colors }
  } = useApphouse();
  const { spacings, zIndex } = tokens;

  const _navigationWidth = `${leftPanelWidth}px`;
  const navigationWidth = navigation ? _navigationWidth : '0px';
  const footerHeight = pagination ? 70 : 0;
  const localStyles = useLocalStyles<PageWithPaginationStyles>(
    {
      container: {},
      navigation: {
        container: {
          width: navigationWidth,
          position: 'fixed',
          overflowY: 'auto',
          paddingBottom: footerHeight,
          justifyContent: 'start',
          alignItems: 'flex-start',
          height: `calc(100vh - ${footerHeight}px)`,
          zIndex: zIndex.panel
        }
      },
      body: {
        title: {
          marginBottom: `${spacings.xl}px`
        },
        container: {
          alignItems: 'flex-start',
          backgroundColor: colors.surface,
          borderRadius: 0,
          boxSizing: 'border-box',
          color: colors.onSurface,
          justifyContent: 'start',
          height: `calc(100vh - ${footerHeight}px)`,
          marginLeft: navigationWidth,

          paddingLeft: `${spacings.xxxl}px`,
          paddingRight: `${spacings.xxxl}px`,
          paddingTop: `${spacings.xxxl}px`,
          width: 'inherit',
          overflowY: 'auto'
        },
        content: {
          width: '100%',
          height: '100%',
          backgroundColor: 'transparent',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'flex-start',
          paddingBottom: `${spacings.xxxl}px`
        }
      },
      pagination: {
        container: {
          position: 'fixed',
          bottom: 0,
          width: windowWidth,
          backgroundColor: colors.surface
        }
      }
    },
    styleOverwrites,
    gutters
  );
  return (
    <div
      data-xray="PageWithPagination"
      data-style="container"
      {...css(localStyles.container)}
    >
      {navigation && (
        <NavigationList
          {...navigation}
          styleOverwrites={localStyles.navigation}
        />
      )}

      <View
        orientation="vertical"
        styleOverwrites={localStyles.body?.container}
        data-style="body.container"
      >
        {title && (
          <View
            orientation="vertical"
            styleOverwrites={localStyles.body?.title}
            data-style="body.title"
          >
            {title}
          </View>
        )}
        <View
          styleOverwrites={localStyles.body?.content}
          data-style="body.content"
        >
          {children}
        </View>
      </View>

      {pagination && (
        <Pagination {...pagination} styleOverwrites={localStyles.pagination} />
      )}
    </div>
  );
});