/*
 * @Author: Nian Yi
 * @Date: 2022-04-13 15:25:57
 * @LastEditTime: 2022-04-27 18:23:30
 * @LastEditors: Nian Yi
 * @Description: 
 * @FilePath: /easyvadmin/src/scripts/containers/screen-edit/components/ScreenLayers/LayerItem.tsx
 * 奥利给
 */
import React, { memo } from 'react';
import classNames from 'classnames';
import LayerControl from './LayerControl';
import Thumb from '../../../../components/Thumb';
import panelThumb from 'images/panel.png';
import EditableText from './EditableText';
import styles from './LayerItem.less';
import { isComponent ,getAssetsUrl} from 'utils/utils';

function LayerItem({
  data,
  selected,
  draggableId,
  provided = {},
  level,
  onSelect,
  onChange
}: {
  data: any;
  selected: boolean;
  draggableId: number | string;
  provided: any;
  level: number;
  onSelect: (e, id) => any;
  onChange: (param) => any;
}) {
  const { show, id, name, lock, thumb } = data;
  const handleMouseEnter = () => {
    let dom = document.getElementById(`${id}`);
    if (dom) {
      dom.classList.add('z-hover');
    }
  };

  const handleMouseLeave = () => {
    let dom = document.getElementById(`${id}`);
    if (dom) {
      dom.classList.remove('z-hover');
    }
  };

  const onClick = (e) => {
    e.stopPropagation();
    onSelect(e, id);
  };

  const onComponentUnlock = (e) => {
    e.stopPropagation();
    onChange([{ id, key: 'lock', value: false }]);
  };

  return (
    <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
      <div
        id={`layer_${id}`}
        className={classNames(styles.item, { [styles.selected]: selected }, { [styles.nodragging]: draggableId && draggableId !== id })}
        style={{ paddingLeft: 12 + level * 16 }}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}>
        <div className={styles.box} onClick={onClick}>
          <LayerControl id={id} show={show} selected={selected} onShow={onChange} />
          <Thumb
            className={styles.thumb}
            src={isComponent(id) ? (thumb ? getAssetsUrl(`${thumb}`) : undefined) : panelThumb}
          />
          <EditableText id={id} text={name} selected={selected} updateName={onChange} />
          {lock && <i className="icon iconfont icon-icon_lock" style={{ cursor: 'pointer', fontSize: 14 }} onClick={onComponentUnlock} />}
        </div>
      </div>
    </div>
  );
}

export default memo(LayerItem);
