import React from 'react';
import classNames from 'classnames';
import EditableText from '../../screen-edit/components/ScreenLayers/EditableText';
import styles from './PageItem.less';

export default function PageItem({
  id,
  text,
  active,
  provided,
  onContextMenu,
  onClick,
  onUpdate
}: {
  id: number;
  text: string;
  active: boolean;
  provided: {
    innerRef: HTMLElement;
    draggableProps: any;
    dragHandleProps: any;
  };
  onContextMenu?: (id: number, { x, y }: { x: number; y: number }) => void;
  onClick: (id: number) => void;
  onUpdate: ({ id: number, name: string }) => void;
}) {
  const handleClick = () => {
    onClick(id);
  };

  const handleContextMenu = (e) => {
    e.preventDefault();
    onContextMenu?.(id, { x: e.clientX, y: e.clientY });
  };

  const handleNameUpdate = (name) => {
    onUpdate({ id, name });
  };

  return (
    <li
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      className={classNames(styles.item, { [styles.active]: active })}
      onClick={handleClick}
      onContextMenu={handleContextMenu}
    >
      <i style={{ fontSize: 12, marginRight: 5 }} className="icon iconfont icon-File" />
      <EditableText id={id} text={text} selected={active} updateName={handleNameUpdate} />
    </li>
  );
}
