import React, { Fragment, useCallback, useState } from 'react';
import { connect } from 'react-redux';
import CategoryEditModal from './CategoryEditModal';
import { addCategory, updateCategory, deleteCategory, sortCategory, getModules } from 'models/module';
import EasyvButton from 'components/EasyvButton';

function CategoryEdit({ categorys, addCategory, updateCategory, deleteCategory, sortCategory, getModules }) {
  const [visible, setVisible] = useState(false);

  const handleCancel = useCallback(() => {
    setVisible(false);
    getModules();
  }, []);

  return (
    <Fragment>
      <EasyvButton style={{ marginRight: 12 }} onClick={() => setVisible(true)}>
        分类管理
      </EasyvButton>

      <CategoryEditModal
        visible={visible}
        categorys={categorys}
        onCancel={handleCancel}
        onAdd={addCategory}
        onUpdate={updateCategory}
        onDelete={deleteCategory}
        onSort={sortCategory}
      />
    </Fragment>
  );
}

const mapStateToProps = ({ modules }) => {
  return {
    categorys: modules.categorys
  };
};

const mapDispatchToProps = {
  addCategory,
  updateCategory,
  deleteCategory,
  sortCategory,
  getModules
};

export default connect(mapStateToProps, mapDispatchToProps)(CategoryEdit);
