import * as React from 'react'
import * as cx from 'classnames'
import { StylableComponent } from '../theme'
import { DrawerProps } from './interfaces'

const styles = require('../../../src/components/drawer/styles.scss')

export class Drawer extends StylableComponent<DrawerProps> {

    public static defaultProps = {
        width: 200,
        docked: false,
    }

    public drawer: any

    constructor(props: DrawerProps, state: any) {
        super(props, state);
    }

    // public componentDidMount() {
    //     this.drawer.addEventListener('webkitAnimationEnd', this.onAnimationEnded);
    // }

    // public componentWillUnmount() {
    //     this.drawer.removeEventListener('webkitAnimationEnd', this.onAnimationEnded);
    // }

    // public render() {
    //     const overlayClass = this.getOverlayClassName(theme, animate);
    //     const drawerClass = this.getDrawerClassName(theme, animate);

    //     return (
    //         <div>
    //             {!this.props.noOverlay ? <div
    //                 ref={(c) => this.overlay = c}
    //                 className={overlayClass}
    //                 onClick={this.props.closeDrawer}>
    //             </div> : null}
    //             <div
    //                 className={drawerClass}
    //                 ref={(c) => this.drawer = c}>
    //                 {this.props.children}
    //             </div>
    //         </div>
    //     )
    // }

    // private getOverlayClassName = () => {
    //     cx(
    //         'react-drawer-overlay',
    //         theme.overlay,
    //         animate.animated,
    //         {
    //             [`${animate.fadeIn}`]: this.state.open,
    //             [`${animate.fadeOut}`]: !this.state.open,
    //             [`${theme.hidden}`]: this.state.hiddenOverlay,
    //         },
    //     )

    // private getDrawerClassName = () => {
    //     const position = this.props.position || 'right';
    //     const themeAttr = `drawer-${position}`;
    //     const drawerTheme = theme[themeAttr];
    //     let direction, start;
    //     if (this.state.open) {
    //         direction = 'In';
    //         switch (position) {
    //             case 'top':
    //                 start = 'Down'; break;
    //             case 'bottom':
    //                 start = 'Up'; break;
    //             case 'left':
    //                 start = 'Left'; break;
    //             case 'right':
    //                 start = 'Right'; break;
    //         }
    //     } else {
    //         direction = 'Out';
    //         switch (position) {
    //             case 'top':
    //                 start = 'Up'; break;
    //             case 'bottom':
    //                 start = 'Down'; break;
    //             case 'left':
    //                 start = 'Left'; break;
    //             case 'right':
    //                 start = 'Right'; break;
    //         }
    //     }
    //     const fade = animate[`fade${direction}${start}`];
    //     return classNames(
    //         'react-drawer-drawer',
    //         theme.drawer,
    //         drawerTheme,
    //         animate.animated,
    //         fade,
    //         {
    //             [`${theme.hidden}`]: this.state.hiddenDrawer,
    //         },
    //     );
    // }

}