import React, { useState } from 'react'
import { message, Modal, Select } from 'antd'
import { CRUDProps, CRUDState } from '../../types';
import { ITableStore } from '../../../../store/table';
import { exportXLSX, exportXLSX2, exportXLSXFromCross } from '../../../../utils/xlsx';
import { flatMap } from 'lodash';

interface ExportModalProps {
  props: CRUDProps;
  tableStore: ITableStore | null;
  staticExportShow: CRUDState['staticExportShow'];
  setCrudState: (...res: any) => any;
}

enum ExportRangeEnum {
  CURRENT, SELECTED, ALL
}

enum DataFormatEnum {
  RAW, FORMAT
}

const ExportModal: React.FC<ExportModalProps> = (modalProps) => {

  // if (!this.state.staticExportShow || isMobile()) return null

  const { staticExportShow, props, tableStore, setCrudState, } = modalProps;

  const { env, translate: __, mode, } = props;

  const [exportRange, setExportRange] = useState(ExportRangeEnum.CURRENT);

  const [dataFormat, setDataFormat] = useState(DataFormatEnum.RAW);

  const handleExport = () => {
    if (!tableStore) return;
    if (exportRange === ExportRangeEnum.SELECTED) {
      if (tableStore.selectedRows.length === 0) {
        message.warn('选中数据为空');
        return;
      }
    }
    const excelData = exportRange === ExportRangeEnum.ALL ? [] : flatMap(tableStore.rows, (row) => {
      if (exportRange === ExportRangeEnum.SELECTED) {
        return row.checked ? row.data : [];
      }
      return row.data;
    })
    const columns = tableStore.filteredColumns.filter(item => item.type !== '__checkme' && item.type != '__pseudoColumn')
    if (mode == 'cross') {
      const tableHeadRows = tableStore.tableHeadRows.map(row => row.filter(item => item.name != 'SF_CHECK' && item.name != 'SF_PSEUDO'))
      exportXLSXFromCross(tableHeadRows, columns, excelData, `${props.aliasTitle?.trim?.() || '交叉制表'}.xlsx`, dataFormat === DataFormatEnum.FORMAT)
    } else {
      exportXLSX2(columns, excelData, `${props.aliasTitle?.trim?.() || '统计'}.xlsx`)
    }
  }

  return <Modal
    title={<div className='dialog-title'><div className='disabled-move-title'>文件导出</div></div>}
    className='common-modal-component'
    visible={staticExportShow}
    closable={false}
    okText="确定"
    cancelText="取消"
    width={320}
    style={{ top: 200 }}
    maskClosable={false}
    bodyStyle={{ padding: '8 16' }}
    onCancel={() => { setCrudState({ staticExportShow: false }) }}
    zIndex={1011}
    onOk={handleExport}
    getContainer={env.getModalContainer}
  >
    <div>
      <div>
        <div style={{ marginBottom: '4px' }}>导出范围</div>
        <Select
          style={{ width: '100%' }}
          options={
            [
              { label: '当前页数据', value: ExportRangeEnum.CURRENT },
              { label: '选中数据', value: ExportRangeEnum.SELECTED },
              { label: '全部数据', value: ExportRangeEnum.ALL }
            ]
          }
          placeholder={__('Select.placeholder')}
          value={exportRange}
          onChange={setExportRange}
        />
      </div>
      <div style={{ marginTop: '16px' }}>
        <div style={{ marginBottom: '4px' }}>数据格式</div>
        <div>
          <Select
            style={{ width: '100%' }}
            options={
              [
                { label: '保留数据格式', value: DataFormatEnum.FORMAT },
                { label: '导出为原始数据', value: DataFormatEnum.RAW }
              ]
            }
            placeholder='导出方式'
            value={dataFormat}
            onChange={setDataFormat}
          />
        </div>
      </div>
    </div>
  </Modal>

}

export default ExportModal;