import { css, CSSProperties } from 'glamor';
import { observer } from 'mobx-react';
import { ApphouseComponent } from './component.interfaces';
import { LayoutStyles } from '../styles/defaults/themes.interface';
import { mergeStyles, useApphouse } from '..';
import { ViewStyle } from './cross-platform/@types/styles.cross-platform.interface';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';
import React from 'react';
import { omitAll } from '../utils/obj/omitAll';

/**
 * Interface for the view component
 */
interface ViewProps extends ApphouseComponent<CSSProperties>, ViewStyle {
  /**
   * 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;
  /**
   * To allow xray to be enabled for this component at the top component level
   * since View is a wrapper component
   */
  ['data-xray']?: string;
  /**
   * To allow style to be set for this component at the top component level
   * since View is a wrapper component
   */
  ['data-style']?: string;
}
/**
 * A component that renders a view
 */
export const View = observer((props: ViewProps) => {
  const {
    orientation = 'horizontal',
    styleOverwrites: _styles,
    children,
    gutters,
    centerAlign = false,
    ['data-xray']: _xray = 'View',
    ['data-style']: _style = 'CSSProperties',
    ...rest
  } = props;

  const { theme } = useApphouse();
  const { styles } = theme;
  const viewPropStyles = omitAll(rest, [
    'gutters',
    'children',
    'orientation',
    'key',
    'styleOverwrites',
    'data-xray',
    'data-style'
  ]);

  const _localStyles = mergeStyles(
    styles.layout[orientation],
    viewPropStyles,
    gutters
  );
  const componentStyles = useLocalStyles(
    _localStyles,
    centerAlign
      ? orientation === 'vertical'
        ? { alignItems: 'center' }
        : { justifyContent: 'center' }
      : {}
  );
  const localStyles = useLocalStyles(componentStyles, _styles, gutters);

  return (
    <div
      data-id="View"
      data-xray={_xray}
      data-style={_style}
      {...css({ color: 'inherit' }, localStyles)}
    >
      {children}
    </div>
  );
});