import { observer } from 'mobx-react';
import { ApphouseComponent } from './component.interfaces';
import { CSSProperties, css } from 'glamor';
import { ButtonClose, mergeStyles, useApphouse } from '..';
import React from 'react';
import { Elevation } from '../styles/defaults/elevation.styles';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';
// const drawerAnimation = keyframes({
//   '0%': { transform: 'translateX(0)' },
//   '100%': { transform: 'translateX(-100%)' }
// });

export interface DrawerStyles {
  drawerOpen?: CSSProperties;
  drawerClosed?: CSSProperties;
  drawerContent?: CSSProperties;
}
export interface DrawerProps extends ApphouseComponent<DrawerStyles> {
  children: React.ReactNode;
  open?: boolean;
  onClose?: () => void;
  /**
   * The width of the drawer when open
   * @optional
   * @default 300px
   */
  width?: string;
  /**
   * The id of the drawer, must be unique to the app
   */
  id: string;
}
export const Drawer = observer((props: DrawerProps) => {
  const {
    children,
    open = false,
    onClose = () => {
      /** */
    },
    width = '300px',
    id
  } = props;
  const { theme, app } = useApphouse();
  const { colors, tokens } = theme;
  const { spacings, zIndex } = tokens;

  if (!open) {
    return null;
  }

  const componentStyles: DrawerStyles = mergeStyles(
    {
      drawerOpen: {
        position: 'fixed',
        top: 0,
        right: 0,
        width,
        height: '100vh',
        backgroundColor: colors.surface30,
        // transform: 'translateX(0)',
        // animation: `${drawerAnimation} 0.3s forwards`,
        zIndex: zIndex.panel,
        boxShadow: Elevation.depth5.boxShadow,
        boxSizing: 'border-box'
      },
      drawerClosed: {
        position: 'fixed',
        top: 0,
        right: 0,
        width: 0,
        // transform: 'translateX(-100%)',
        // animation: `${drawerAnimation} 0.3s forwards`,
        zIndex: zIndex.panel
      },
      drawerContent: {
        paddingLeft: spacings.l,
        paddingRight: spacings.l,
        marginBottom: '200px',
        height: 'calc(100vh - 100px)',
        overflowY: 'auto',
        color: colors.onSurface30,
        boxSizing: 'border-box'
      }
    },
    props.styleOverwrites
  );
  const drawerStyles = open
    ? componentStyles.drawerOpen
    : componentStyles.drawerClosed;

  const localStyles = useLocalStyles(
    drawerStyles,
    componentStyles,
    props.gutters
  );

  return (
    <div
      id={id}
      {...css(drawerStyles)}
      data-xray="Drawer"
      data-style="drawerOpen-drawerClosed"
      onScroll={(event) => {
        event.preventDefault();
        event.stopPropagation();
      }}
    >
      {open && (
        <ButtonClose
          onClick={() => {
            app.view.setView(id, false);
            onClose && onClose();
          }}
        />
      )}

      <div {...css(localStyles?.drawerContent)} data-style="drawerContent">
        {children}
      </div>
    </div>
  );
});