import React, { useCallback, useState } from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import Thumb from 'components/Thumb';
import panelThumb from 'images/panel.png';
import EditableText from './EditableText';
import styles from './SortableListItem.less';
import LayerIcon from './LayerIcon';
import { getLayerHoverStatus } from 'utils/effects';
import { PartialStateShare, isComponent, isPanel, isRefScreen, getAssetsUrl } from 'utils/utils';
import { Icon } from 'components/easyDesign';
import { changeComponentConfigActiveKey } from 'models/create-app';
import { hasInteraction } from 'utils/interaction';

function SortableListItem({
  id,
  thumb,
  name,
  selected,
  lock,
  show,
  focus,
  level,
  useInteraction,
  onSelect,
  onUpdate,
  onContextMenu,
  updateName,
  changeComponentConfigActiveKey,
}) {
  const isHover = getLayerHoverStatus(id);
  const [showEye, setEye] = useState(false);

  const handleClick = (e) => {
    onSelect(e, id);
  };

  const handleContextMenu = (e) => {
    onContextMenu(e, id);
  };

  const handleMouseEnter = () => {
    PartialStateShare.emit('mouse_over_layer', { hover: id });
    setEye(true);
  };

  const handleMouseLeave = () => {
    PartialStateShare.emit('mouse_over_layer', null);
    setEye(false);
  };

  const handleIconClick = (type, value) => {
    onUpdate(type, [id], value);
  };

  const handleNameChange = useCallback(
    (value) => {
      updateName({ id, value });
    },
    [id, updateName],
  );

  const icons = [
    { type: 'focus', icon: 'delight', title: '单独显示图层', value: focus, show: focus },
    {
      type: 'show',
      icon: 'hide',
      title: show ? '隐藏' : '显示',
      value: show,
      show: showEye || !show,
    },
    { type: 'lock', title: '锁定', value: lock, show: lock },
  ];

  return (
    <li
      id={`layer_${id}`}
      data-id={id}
      className={classNames(styles.container, {
        selected,
        hide: !show,
        'z-hover': isHover,
      })}
      style={{ paddingLeft: 12 + (level - 1) * 16 }}
      onClick={handleClick}
      onContextMenu={handleContextMenu}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}>
      <Thumb
        className={classNames(styles.thumb, {
          [styles.isPanel]: isPanel(id),
          [styles.isRef]: isRefScreen(id),
        })}
        src={isComponent(id) ? (thumb ? getAssetsUrl(`${thumb}`) : undefined) : panelThumb}
      />
      <EditableText
        focus={focus}
        id={id}
        text={name}
        selected={selected}
        updateName={handleNameChange}
      />
      {icons.map(({ title, type, icon, show, value }) => (
        <LayerIcon
          key={type}
          title={title}
          type={type}
          icon={icon}
          show={show}
          value={value}
          onChange={handleIconClick}
        />
      ))}
      {useInteraction && (
        <Icon
          type="icon_interaction"
          className={styles.icon}
          onClick={() => changeComponentConfigActiveKey('3')}
        />
      )}
    </li>
  );
}

function ContainerOld({
  id,
  componentsById,
  thumb,
  name,
  selected,
  lock,
  show,
  focus,
  level,
  onSelect,
  onUpdate,
  onContextMenu,
  updateName,
  changeComponentConfigActiveKey,
  ...props
}) {
  const useInteraction = hasInteraction(componentsById[id]);
  return (
    <SortableListItem
      id={id}
      thumb={thumb}
      name={name}
      selected={selected}
      lock={lock}
      useInteraction={useInteraction}
      show={show}
      focus={focus}
      level={level}
      onSelect={onSelect}
      onUpdate={onUpdate}
      onContextMenu={onContextMenu}
      updateName={updateName}
      changeComponentConfigActiveKey={changeComponentConfigActiveKey}
      {...props}
    />
  );
}

const mapStateToProps = ({ componentsById }) => {
  return {
    componentsById,
  };
};

const mapDispatchToProps = {
  changeComponentConfigActiveKey: changeComponentConfigActiveKey,
};
const Container = connect(mapStateToProps, mapDispatchToProps)(ContainerOld);

export default Container;
