import Button from '../button';
import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import { Drawer as NextDrawer } from '@alifd/next';
import { DrawerProps as NextDrawerProps } from '@alifd/next/types/drawer';

interface DrawerAddProps {
  size?: 'small' | 'medium' | 'large';
  fullScreen?: boolean;
  multilevel?:boolean;
  footer?: boolean | React.ReactNode;
  footerAlign?: 'left' | 'center' | 'right';
  footerActions?: Array<string>;
  onOk?: (event: React.MouseEvent) => void;
  onCancel?: (event: React.MouseEvent) => void;
  okProps?: any;
  cancelProps?: any;
  top?: number;
}

interface DrawerProps extends NextDrawerProps, DrawerAddProps {}

class Drawer extends Component<DrawerProps> {

  render() {

    const { prefix = 'next-', className, size = 'medium', fullScreen, multilevel, children, footer = false, onOk, onCancel, okProps, cancelProps, footerAlign = 'right', width, footerActions, top } = this.props;

    if (multilevel) {
      const curwidth = document.getElementsByClassName(`${prefix}drawer-previus`)[0] ? document.getElementsByClassName(`${prefix}drawer-previus`)[0].clientWidth : 0;

      let prewidth: number;
      if (size === 'medium') {
        prewidth = 640;
      } else if (size === 'small') {
        prewidth = 480;
      } else if (size === 'large') {
        prewidth = 800;
      }

      return (
        <NextDrawer
          footerAlign={footerAlign}
          {...this.props}

          className = {cls(
            className, {
              [`${prefix}drawer-small`]: size === 'small',
              [`${prefix}drawer-medium`]: size === 'medium',
              [`${prefix}drawer-large`]: size === 'large',
              [`${prefix}drawer-fullscreen`]: fullScreen,
              [`${prefix}drawer-multilevel`]: multilevel,
              [`${prefix}drawer-footer`]: footer,
              [`${prefix}drawer-footer-center`]: footerAlign === 'center',
              [`${prefix}drawer-footer-right`]: footerAlign === 'right',
              [`${prefix}drawer-footer-left`]: footerAlign === 'left',
              [`${prefix}drawer-footer-only-ok`]: footerActions?.join('') === [ 'ok' ].join(''),
              [`${prefix}drawer-footer-only-cancel`]: footerActions?.join('') === [ 'cancel' ].join(''),
              [`${prefix}drawer-footer-reverse`]: footerActions?.join('') === [ 'ok', 'cancel' ].join(''),
              [`${prefix}drawer-with-top`]: top,
            })
          }
          style = {{ width: this.props.width ? (Number(this.props.width) + curwidth) : (prewidth + curwidth), paddingRight: curwidth, position: 'relative', marginTop: top }}
        >

          <div className = {`${prefix}drawer-multi-child`} style = {{ position: 'relative', height: '100%' }}> {children}</div>
          {(footer == null || footer === true) ? <footer className = {`${prefix}drawer-btn`} style = {{ paddingBottom: (footerAlign === 'right' || footerAlign === 'center') ? (top + 64) : (top + 16) }}>
            <div className={`${prefix}drawer-btn-child`} style={{ zIndex: 2000, right: footerAlign === 'right' ? (curwidth + 24) : undefined, left: (footerAlign === 'center' ? Number(width ? width : prewidth) / 2 : (footerAlign === 'left' ? '24px' : undefined)), transform: (footerAlign === 'center' ? '-50%' : undefined), bottom: 24 + top }}>
              <Button
                type="secondary"
                size="large"
                onClick={onCancel}
                style={{ marginRight: '8px' }}
              >
                {cancelProps ? cancelProps : '取消'}
              </Button>

              <Button
                type="primary"
                size="large"
                onClick={onOk}
              >
                {okProps ? okProps : '确认'}
              </Button>
            </div>
          </footer> : (!footer ? undefined : footer)}

        </NextDrawer>
      );
    }


    return (
      <NextDrawer
        {...this.props}
        style={{ marginTop: top }}
        className = {cls(
          className, {
            [`${prefix}drawer-small`]: size === 'small',
            [`${prefix}drawer-medium`]: size === 'medium',
            [`${prefix}drawer-large`]: size === 'large',
            [`${prefix}drawer-fullscreen`]: fullScreen,
            [`${prefix}drawer-previus`]: true,
            [`${prefix}drawer-footer`]: footer,
            [`${prefix}drawer-footer-center`]: footerAlign === 'center',
            [`${prefix}drawer-footer-right`]: footerAlign === 'right',
            [`${prefix}drawer-footer-left`]: footerAlign === 'left',
            [`${prefix}drawer-footer-only-ok`]: footerActions?.join('') === [ 'ok' ].join(''),
            [`${prefix}drawer-footer-only-cancel`]: footerActions?.join('') === [ 'cancel' ].join(''),
            [`${prefix}drawer-footer-reverse`]: footerActions?.join('') === [ 'ok', 'cancel' ].join(''),
            [`${prefix}drawer-with-top`]: top,
          })
        }
      >
        {children}
        {(footer == null || footer === true) ? <footer className = {`${prefix}drawer-btn`} style = {{ zIndex: 2000, paddingBottom: (footerAlign === 'right' || footerAlign === 'center') ? (top + 64) : (top + 16) }}>
          <div className={`${prefix}drawer-btn-child`}>
            <Button
              type="secondary"
              size="large"
              onClick={onCancel}
              style={{ marginRight: '8px' }}
            >
              {cancelProps ? cancelProps : '取消'}
            </Button>

            <Button
              type="primary"
              size="large"
              onClick={onOk}
            >
              {okProps ? okProps : '确认'}
            </Button>
          </div>
        </footer> : (!footer ? undefined : footer)}
      </NextDrawer>);

  }
}

export default ConfigProvider.config(Drawer);