import React from 'react';
import { observer } from 'mobx-react';
import { CSSProperties, css } from 'glamor';
import { LayoutStyles } from '../../styles/defaults/themes.interface';
import { View } from '../../components/View';
import { useLocalStyles } from '../../styles/defaults/useLocalStyles';
import { ApphouseComponent } from '../component.interfaces';
import { ViewProps } from '../cross-platform/Views/View';

export interface PageStyles {
  container?: CSSProperties;
}

export interface PageProps
  extends Omit<ViewProps, 'styleOverwrites' | 'gutters'>,
    ApphouseComponent<PageStyles> {
  /**
   * The orientation of the view
   * @default "horizontal"
   * @optional
   */
  orientation?: keyof LayoutStyles;
  /**
   * The children to render
   */
  children?: React.ReactNode;
  /**
   * If true, the view will set alignItems: "center" when
   * orientation is "vertical" and justifyContent: "center" when
   * orientation is "horizontal"
   * @optional
   * @default false
   */
  centerAlign?: boolean;
}

/**
 * A component that renders a page
 * It is a wrapper around the View component except it scrolls to the top of the page
 * when it is rendered
 */
export const Page: React.FC<PageProps> = observer((props) => {
  const { styleOverwrites, gutters, children, orientation, centerAlign } =
    props;

  const componentStyles: PageStyles = {};
  const localStyles = useLocalStyles<PageStyles>(
    componentStyles,
    styleOverwrites,
    gutters
  );

  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <View
      data-xray="Page"
      {...css(localStyles.container)}
      orientation={orientation}
      centerAlign={centerAlign}
    >
      {children}
    </View>
  );
});