import { CSSProperties, css } from 'glamor';
import { observer } from 'mobx-react';
import React from 'react';
import { Elevation } from '../styles/defaults/elevation.styles';
import { useApphouse } from '../context/useApphouse';
import { ThemeColors } from '../styles/defaults/themes.interface';
import { ApphouseComponent } from './component.interfaces';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';
import { toRems } from '../utils/units/toRems';

export type SurfaceVariants = Partial<ThemeColors>;

export interface PaperProps extends ApphouseComponent<CSSProperties> {
  children: React.ReactNode;
  /**
   * If provided, it will set the width of the paper.
   * @default -webkit-fill-available
   */
  width?: number;
  variant?: 'surface' | 'surface10' | 'surface20' | 'surface30' | 'surface40';
}
/**
 * Paper component
 * @param PaperProps
 */
export const Paper: React.FC<PaperProps> = observer((props) => {
  const {
    children,
    variant = 'surface',
    styleOverwrites,
    width: _width = '-webkit-fill-available',
    gutters,
    ...rest
  } = props;
  const { theme } = useApphouse();
  const bgColor = theme.colors[variant as keyof ThemeColors];
  const colorVariantKey = ('on' +
    variant[0].toUpperCase() +
    variant.slice(1)) as keyof ThemeColors;

  const color = theme.colors[colorVariantKey];

  // Handle width
  let width = _width;
  if (typeof _width === 'number') {
    width = toRems(_width);
  }
  const localStyles = useLocalStyles(
    {
      ...Elevation.depth3,
      backgroundColor: bgColor,
      padding: theme.tokens.spacings.l,
      borderRadius: theme.tokens.radius.m,
      fontFamily: theme.tokens.fontFamily.text,
      color: color,
      width: width
    },
    styleOverwrites,
    gutters
  );

  return (
    <div
      {...css(localStyles)}
      data-xray="Paper"
      data-variant={variant}
      {...rest}
    >
      {children}
    </div>
  );
});