import React, { useState, useCallback } from 'react';
import ConfirmModal from 'components/ConfirmModal';
import CategoryList from './CategoryList';
import EasyvButton from 'components/EasyvButton';
import styles from './CategoryEditModal.less';

function CategoryEditModal({ visible, categorys, onCancel, onAdd, onUpdate, onDelete, onSort }) {
  const [adding, setAdding] = useState(false);

  const handleAdd = useCallback((value) => {
    if (value) {
      onAdd(value);
    }
    setAdding(false);
  }, []);

  const topCategory = categorys.find((d) => d.id === '1');

  const footer = (
    <div className={styles.footer}>
      <span className={styles.add} onClick={() => setAdding(true)}>
        + 添加分类
      </span>
      <EasyvButton onClick={onCancel}>关闭</EasyvButton>
    </div>
  );

  return (
    <ConfirmModal
      visible={visible}
      title="分类管理"
      okText="确定"
      footer={footer}
      contentStyle={{ padding: '16px 0' }}
      onCancel={onCancel}
      theme="black">
      {topCategory && (
        <div className={styles.topCategory}>
          <span>{topCategory.name}（默认）</span>
        </div>
      )}
      <CategoryList
        adding={adding}
        categorys={categorys.filter((d) => d.id !== '1')}
        onAdd={handleAdd}
        onUpdate={onUpdate}
        onDelete={onDelete}
        onSort={onSort}
      />
    </ConfirmModal>
  );
}

export default CategoryEditModal;
