import React, { useState } from 'react';
import { connect } from 'react-redux';
import ImportModal from './ImportModal';
import { importThemesPack } from 'models/theme';
import exportConfig from 'constants/export-config';
import { Type } from 'models/theme.types';

const { extension } = exportConfig;

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

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

  return (
    <span>
      <span onClick={() => setVisible(true)}>{children}</span>
      <ImportModal
        visible={visible}
        title="导入主题包"
        data={[{ name: 'configs', file: 'themepack.json' }]}
        assets={['themepack']}
        onCancel={handleClose}
        onDataUpload={importThemesPack}
        accept={[extension.themepack]}
      />
    </span>
  );
}

const mapDispatchToProps = {
  importThemesPack
};

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