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

const { extension } = exportConfig;

function ImportContainer({ children, importThemes, 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: 'configs', file: 'theme.json' }]}
        assets={['thumb']}
        onCancel={handleClose}
        onDataUpload={importThemes}
        accept={[extension.theme]}
      />
    </span>
  );
}

const mapDispatchToProps = {
  importThemes
};

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