import * as React from 'react';
import * as classNames from 'classnames';
import {Component, HTMLProps, MouseEvent, SFC} from 'react';
import {Nav, NavLink} from 'reactstrap';
import {Icon, Scrollbars} from './';
import {Drawer as MdcDrawer, DrawerHeader, DrawerHeaderContent, DrawerContent} from 'react-mdc-web/lib';

const styles = {
  scrollbars: {
    height: 'calc(100vh - 70px)',
  },
};

export interface Props extends HTMLProps<{}> {
  open?: boolean;
  title: string;
  onClose: () => void;
}

export class Drawer extends Component<Props, {}> {
  private scrollbars: Scrollbars;

  static defaultProps: Partial<Props> = {
    open: false,
  };

  render() {
    const {children, open, title} = this.props;

    return (
      <MdcDrawer
        className="mdc-typography main-drawer"
        open={open}
        onClose={this.handleClose}
        style={{display: 'block'}}
      >
        <DrawerHeader>
          <DrawerHeaderContent>
            <h2 className="title">{title}</h2>

            <button
              type="button"
              className="btn btn-close-nav toggle-drawer"
              onClick={this.handleClose}
            >
              <Icon name="arrow_back" />
            </button>
          </DrawerHeaderContent>
        </DrawerHeader>

        <DrawerContent>
          <Scrollbars
            ref={(instance) => this.scrollbars = instance}
            style={styles.scrollbars}
          >
            {children}
          </Scrollbars>
        </DrawerContent>
      </MdcDrawer>
    );
  }

  handleClose = () => {
    this.scrollbars.scrollToTop();
    this.props.onClose();
  }
}