import { observer } from 'mobx-react';
import { mergeStyles, useApphouse } from '../../..';
import { CrossPlatformThemeProps } from '../cross-platform.interface';
import { css } from 'glamor';
import { ViewStyle } from '../@types/styles.cross-platform.interface';

export interface WebView extends CrossPlatformThemeProps {
  style?: ViewStyle;
  /**
   * The content of the view
   */
  children?: any;
}

/**
 * A component used to display a view and it aims
 * to keep the same interface for both mobile and web
 * so that it can be used when using react-native as well
 * with minimal changes.
 *
 * It will have a little different interface than other Apphouse
 * components to accommodate for mobile and web
 */
export const WebView = observer((props: WebView) => {
  const {
    theme: { colors },
    app
  } = useApphouse();

  const { lightColor, darkColor, children, style } = props;
  let backgroundColor = 'transparent';

  const bgColor = {
    light: lightColor || colors.lightColor,
    dark: darkColor || colors.darkColor
  };

  if (app.settings.theme.id === 'dark') {
    backgroundColor = bgColor.dark;
  }
  if (app.settings.theme.id === 'light') {
    backgroundColor = bgColor.light;
  }

  if (!lightColor && !darkColor) {
    // default backgroundColor is transparent
    backgroundColor = 'transparent';
  }

  const localStyles = mergeStyles({ backgroundColor }, style);
  return <div {...css(localStyles)}>{children}</div>;
});

export interface ViewProps extends ViewStyle, CrossPlatformThemeProps {
  /**
   * The content of the view
   */
  children?: any;
}

export const View = observer((props: ViewProps) => {
  const { lightColor, darkColor, children, ...ViewStyles } = props;
  const {
    app: {
      settings: { platform }
    }
  } = useApphouse();

  if (platform === 'web') {
    return (
      <WebView
        lightColor={lightColor}
        darkColor={darkColor}
        style={ViewStyles as ViewStyle}
      >
        {children}
      </WebView>
    );
  }
  // when in Mobile this view just needs to be subbed with the native Mobile View
  return null;
  // TODO:
  // if (Platform.OS === 'mobile') { return <View {...props} />; }
});