import React, {Suspense} from 'react';
import Dropzone from 'react-dropzone';
import {FileRejection} from 'react-dropzone';
import {autobind} from '../../utils/helper';
import {FormItem, FormControlProps, FormBaseControl} from './Item';

/**
 * Excel 解析
 * 文档：https://baidu.gitee.io/amis/docs/components/form/input-excel
 */
export interface InputExcelControlSchema extends FormBaseControl {
  /**
   * 指定为 Excel 解析
   */
  type: 'input-excel';

  /**
   * 是否解析所有 sheet，默认情况下只解析第一个
   */
  allSheets: boolean;

  /**
   * 解析模式，array 是解析成二维数组，object 是将第一列作为字段名，解析为对象数组
   */
  parseMode: 'array' | 'object';

  /**
   * 是否包含空内容，主要用于二维数组模式
   */
  includeEmpty: boolean;
}

export interface ExcelProps
  extends FormControlProps,
    Omit<
      InputExcelControlSchema,
      'type' | 'className' | 'descriptionClassName' | 'inputClassName'
    > {}

export interface ExcelControlState {
  open: boolean;
}

export default class ExcelControl extends React.PureComponent<
  ExcelProps,
  ExcelControlState
> {
  static defaultProps: Partial<ExcelProps> = {
    allSheets: false,
    parseMode: 'object',
    includeEmpty: true
  };
  state: ExcelControlState = {
    open: false
  };

  @autobind
  handleDrop(files: File[]) {
    const {allSheets, onChange} = this.props;
    const excel = files[0];
    const reader = new FileReader();
    reader.readAsArrayBuffer(excel);
    reader.onload = async () => {
      if (reader.result) {
        import('exceljs').then(async (ExcelJS: any) => {
          const workbook = new ExcelJS.Workbook();
          await workbook.xlsx.load(reader.result);
          if (allSheets) {
            const sheetsResult: any[] = [];
            workbook.eachSheet((worksheet: any) => {
              sheetsResult.push({
                sheetName: worksheet.name,
                data: this.readWorksheet(worksheet)
              });
              onChange(sheetsResult);
            });
          } else {
            const worksheet = workbook.worksheets[0];
            onChange(this.readWorksheet(worksheet));
          }
        });
      }
    };
  }

  /**
   * 读取单个 sheet 的内容
   */
  readWorksheet(worksheet: any) {
    const result: any[] = [];
    const {parseMode} = this.props;

    if (parseMode === 'array') {
      worksheet.eachRow((row: any, rowNumber: number) => {
        const values = row.values;
        values.shift(); // excel 返回的值是从 1 开始的，0 节点永远是 null
        result.push(values);
      });
      return result;
    } else {
      let firstRowValues: any[] = [];
      worksheet.eachRow((row: any, rowNumber: number) => {
        // 将第一列作为字段名
        if (rowNumber == 1) {
          firstRowValues = row.values;
        } else {
          const data: any = {};
          row.eachCell((cell: any, colNumber: any) => {
            if (firstRowValues[colNumber]) {
              data[firstRowValues[colNumber]] = cell.value;
            }
          });
          result.push(data);
        }
      });
      return result;
    }
  }

  render() {
    const {
      className,
      classnames: cx,
      classPrefix: ns,
      value,
      disabled,
      translate: __
    } = this.props;

    return (
      <div className={cx('ExcelControl', className)}>
        <Dropzone
          key="drop-zone"
          onDrop={this.handleDrop}
          accept=".xlsx"
          multiple={false}
          disabled={disabled}
        >
          {({getRootProps, getInputProps}) => (
            <section className={cx('ExcelControl-container', className)}>
              <div {...getRootProps({className: cx('ExcelControl-dropzone')})}>
                <input {...getInputProps()} />
                <p>{__('Excel.placeholder')}</p>
              </div>
            </section>
          )}
        </Dropzone>
      </div>
    );
  }
}

@FormItem({
  type: 'input-excel'
})
export class ExcelControlRenderer extends ExcelControl {}