import React, { memo, useState, useEffect } from 'react';
import { Select } from '@easyv/antd';
import { SortableContainer } from 'react-sortable-hoc';
import ConfirmModal from 'components/ConfirmModal';
import ModuleItem from './ModuleItem';
import classNames from 'classnames';
import styles from '../SortModal.less';
const { Option, OptGroup } = Select;

const MySortbaleContainer = SortableContainer(({ children }) => <div className={styles.sortContainer}>{children}</div>);

function ModuleSortModal({ confirmLoading, title = '素材分类排序', visible, categorys, modules, onCancel, onOk }) {
  const [current, setCurrent] = useState(1);
  const [orders, setOrders] = useState({});

  useEffect(() => {
    if (!visible) {
      setOrders({});
    }
  }, [visible]);

  useEffect(() => {
    if (categorys.length) {
      const [first] = categorys;
      if (first.children && first.children.length) {
        setCurrent(categorys[0].children[0].id);
      } else {
        setCurrent(categorys[0].id);
      }
    }
  }, [categorys]);

  const handleSortEnd = ({ oldIndex, newIndex }) => {
    let arr = filteredModules.slice();
    arr.splice(newIndex, 0, arr.splice(oldIndex, 1)[0]);
    setOrders((prev) => ({ ...prev, [current]: arr }));
  };

  const handleOk = () => {
    onOk(orders, modules);
  };

  const filteredModules = orders[current] ? orders[current] : modules.filter((d) => d.categoryId.includes(current));

  return (
    <ConfirmModal
      confirmLoading={confirmLoading}
      width={700}
      visible={visible}
      title={title}
      okText="保存"
      footer={true}
      onCancel={onCancel}
      onOk={handleOk}
      theme="black">
      <div className={styles.formItem}>
        <label className={styles.label}>组件类别：</label>
        <div className={styles.field}>
          <Select value={current} onChange={(value) => setCurrent(value)} dropdownClassName={styles.selectDrop}>
            {categorys.map((d) => (
              d.children && d.children.length ? (
                <OptGroup label={d.name} key={d.id}>
                  {
                    d.children?.map(val => (<Option key={val.id} value={val.id}>{val.name}</Option>))
                  }
                </OptGroup>
              ) : <Option key={d.id} value={d.id}>{d.name}</Option>))
            }
          </Select>
        </div>
      </div>

      <div className={styles.formItem}>
        <label className={styles.label}>拖拽排序：</label>
        <div className={classNames(styles.field, styles.sort)}>
          <p className={styles.tip}>拖拽下列组件进行排序</p>
          <MySortbaleContainer axis="xy" onSortEnd={handleSortEnd}>
            {filteredModules.length ? (
              filteredModules.map((d, i) => <ModuleItem key={d.id} index={i} name={d.name} thumb={d.thumb} />)
            ) : (
              <div style={{ textAlign: 'center', flex: 1, lineHeight: '100px' }}>该分类下暂无组件</div>
            )}
          </MySortbaleContainer>
        </div>
      </div>
    </ConfirmModal>
  );
}

export default memo(ModuleSortModal);
