import { classes, st } from './DragHandle.st.css.js';
import React, { HTMLAttributes } from 'react';
import {
  DragAndDropLockedLarge,
  DragAndDropLarge,
} from '@wix/wix-ui-icons-common/system';

export interface DragHandleProps extends HTMLAttributes<HTMLDivElement> {
  dataHook?: string;
  dragging?: boolean;
  disabled?: boolean;
  domRef?: React.Ref<HTMLDivElement>;
}

export function DragHandle(props: DragHandleProps) {
  const { dataHook, domRef, dragging, disabled, className, ...rest } = props;
  const dragHandleIcon = disabled ? (
    <DragAndDropLockedLarge data-hook="dnd-locked" />
  ) : (
    <DragAndDropLarge />
  );

  return (
    <div
      data-hook={dataHook}
      ref={domRef}
      {...rest}
      className={st(
        classes.root,
        {
          disabled,
          dragging,
        },
        className,
      )}
    >
      {dragHandleIcon}
    </div>
  );
}