import React, { useState } from 'react';
import { connect } from 'react-redux';
import ImportModal from '../themePanel/ImportModal';
import { importModules } from 'models/module';
import exportConfig from 'constants/export-config';

const { extension } = exportConfig;

function ImportContainer({ children, importModules, onComplete }) {
  const [visible, setVisible] = useState(false);

  const handleClose = () => {
    setVisible(false);
    onComplete();
  };

  return (
    <span>
      <span onClick={() => setVisible(true)}>{children}</span>
      <ImportModal
        visible={visible}
        title="导入素材包"
        data={[
          { name: 'modulesConfig', file: 'modulesConfig.json' },
          { name: 'categoryConfig', file: 'categoryConfig.json' },
          { name: 'filtersConfig', file: 'filtersConfig.json', notRequired: true }
        ]}
        assets={['components', 'thumb', 'data']}
        onCancel={handleClose}
        onDataUpload={importModules}
        accept={[extension.module]}
      />
    </span>
  );
}

const mapDispatchToProps = {
  importModules
};

export default connect(
  null,
  mapDispatchToProps
)(ImportContainer);
