import { css, CSSProperties } from 'glamor';
import { observer } from 'mobx-react';
import { mergeStyles, useApphouse } from '..';

import { useLocalStyles } from '../styles/defaults/useLocalStyles';
import React from 'react';
import { omitAll } from '../utils/obj/omitAll';
import { ViewStyle } from './cross-platform/@types/styles.cross-platform.interface';
import { ApphouseComponent } from './component.interfaces';
import { SpacingsTokensType } from '../styles/defaults/themes.interface';

/**
 * Interface for the view component
 */
interface StackViewProps
  extends ApphouseComponent<CSSProperties>,
    Omit<ViewStyle, 'flexDirection' | 'orientation' | 'gap'> {
  /**
   * 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;
  /**
   * The gutters to apply between the children
   * @optional
   * @default "l"
   */
  gap?: keyof SpacingsTokensType;
}
/**
 * A component that render content by stacking it horizontally
 */
export const StackView = observer((props: StackViewProps) => {
  const {
    styleOverwrites,
    children,
    gutters,
    centerAlign = false,
    ['data-xray']: _xray,

    ...rest
  } = props;

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

  const viewPropStyles = omitAll(rest, [
    'gutters',
    'children',
    'key',
    'styleOverwrites',
    'data-xray'
  ]);

  const _localStyles = mergeStyles(viewPropStyles);
  const componentStyles = useLocalStyles(
    _localStyles,
    centerAlign ? { alignItems: 'center' } : {}
  );
  const localStyles = useLocalStyles<CSSProperties>(
    componentStyles,
    styleOverwrites,
    gutters
  );

  return (
    <div
      data-id="StackView"
      data-xray={_xray}
      data-style="CSSProperties"
      {...css(
        {
          width: '100%',
          color: 'inherit',
          flexWrap: 'wrap',
          display: 'flex',
          flexDirection: 'row',
          boxSizing: 'border-box',
          gap: spacings[props.gap || 'l']
        },
        localStyles
      )}
    >
      {children}
    </div>
  );
});