import { forwardRef, ForwardedRef } from 'react';
import styles from '../styles/rt-list.module.css';
import { RtFrame } from '@dpa/react-frame-intro';
import classNames from 'classnames/bind';
import { RtListItem, RtListProps } from '../types/rt-list.types';
import { DndContext, closestCenter } from '@dnd-kit/core';
import {
  SortableContext,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { useRtBaseProps } from '@dpa/react-hoc';
import { useDndList } from '../hooks/useDndList';
import { RtGrid } from '@dpa/react-grid';

const cn = classNames.bind(styles);

const RtInternalList = (
  props: RtListProps,
  ref: ForwardedRef<HTMLDivElement>
) => {
  const {
    children,
    items,
    getId,
    renderItem,
    onReorder,
    useGrid,
    ariaLabel,
    use,
    ...otherProps
  } = props;

  const baseProps = useRtBaseProps(props, '0.2.2');

  const { handleDragEnd, sensors, idGetter, getRenderItemFn } = useDndList(
    items,
    onReorder,
    getId,
    renderItem
  );

  const renderItemFn = getRenderItemFn(use);

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <SortableContext
        items={items.map(idGetter)}
        strategy={verticalListSortingStrategy}
      >
        <RtFrame
          {...baseProps}
          {...otherProps}
          ref={ref}
          className={cn('rt-list')}
        >
          {useGrid ? (
            <RtGrid
              as="ul"
              direction="vertical"
              role={undefined}
              ariaLabel={ariaLabel}
            >
              {items.map((item) => (
                <li key={item.id}>{renderItemFn(item)}</li>
              ))}
            </RtGrid>
          ) : (
            <ul aria-label={ariaLabel}>
              {items.map((item) => (
                <li key={item.id}>{renderItemFn(item)}</li>
              ))}
            </ul>
          )}
        </RtFrame>
      </SortableContext>
    </DndContext>
  );
};

/**
 * Компонент для отображения списка с DnD.
 * Может использовать RtGrid. В качестве единицы списка может использовать RtItem
 * {@link RtListProps}
 */
export const RtList = forwardRef(RtInternalList);

RtList.displayName = 'RtList';