import React, { useCallback, memo } from 'react';
import Sortable from 'react-sortablejs';
import classNames from 'classnames';
import SortableListItem from './SortableListItem';
import SortableListGroup from './SortableListGroup';
import styles from './SortableList.less';
import { connect } from 'react-redux';
import { screenOperator } from 'utils/screen';

interface IProps {
  focusLayers?: (string | number)[];
  layers: any[];
  layersSelected: (string | number)[];
  constants: any[];
  level?: number;
  id?: string | number;
  collapsed?: boolean;
  onDragEnd: () => any;
  onSelect: (e, p) => any;
  onUpdate: (status, id?, value?) => any;
  onContextMenu: (e, id) => any;
  updateName: (name) => any;
  type?: string;
}

function SortableListOld(props: IProps) {
  const {
    focusLayers,
    layers,
    layersSelected,
    constants,
    level = 1,
    id = 'top',
    collapsed,
    onDragEnd,
    onSelect,
    onUpdate,
    onContextMenu,
    updateName,
    type,
  } = props;

  const focusSet = screenOperator.computeFocusLayers(layers, focusLayers);
  const list = layers.map((d) => {
    if (d.components) {
      return (
        <li key={d.id} data-id={d.id} className={d.show ? '' : 'hide'}>
          <SortableListGroup
            {...d}
            focus={focusSet && focusSet.has(d.id)}
            level={level}
            selected={layersSelected.indexOf(d.id) > -1}
            onSelect={onSelect}
            onUpdate={onUpdate}
            onContextMenu={onContextMenu}
            updateName={updateName}
          />
          <SortableList
            {...props}
            id={d.id}
            layers={d.components}
            level={level + 1}
            collapsed={d.collapsed}
          />
        </li>
      );
    } else {
      const constant = constants.find((v) => v.moduleName === d.moduleName) || {};
      return (
        <SortableListItem
          key={d.id}
          {...d}
          focus={focusSet && focusSet.has(d.id)}
          thumb={constant.thumb}
          level={level}
          selected={layersSelected.indexOf(d.id) > -1}
          onSelect={onSelect}
          onUpdate={onUpdate}
          onContextMenu={onContextMenu}
          updateName={updateName}
        />
      );
    }
  });

  const handleSpaceClick = useCallback(
    (e) => {
      onSelect(e, null);
    },
    [onSelect],
  );

  // todo: ??
  const handleChange = useCallback(() => {}, []);

  return (
    <Sortable
      className={classNames(styles.container, { collapsed })}
      tag="ul"
      id={`c_${id}`}
      onClick={handleSpaceClick}
      onChange={handleChange}
      options={{
        group: 'nested',
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65,
        direction: 'vertical',
        onEnd: onDragEnd,
      }}>
      {list}
    </Sortable>
  );
}

const mapStateToProps = ({ createApp }) => ({ focusLayers: createApp.focusLayers });
const SortableList = connect(mapStateToProps, null)(memo(SortableListOld));

export default SortableList;
