import { generateGuid } from '@vev/utils';
import React, { useMemo } from 'react';
import { BoxProps, SilkeBox } from '../silke-box';
import { SilkeSortableItemWrapper } from './silke-sortable-item-wrapper';
import styles from './silke-sortable-list.scss';

type SilkeSortableListProps<T> = {
  items: T[];
  /** You can sort between multiple list with the same id */
  listId?: string;
  /** When is sort triggered, default is when over */
  triggerState?: 'over' | 'drop';
  /** Show sort box instead of sort line */
  showSortAsBox?: boolean;
  disabled?: boolean;
  children: (item: T, index: number) => React.ReactElement;
  onSort: (sortedItems: T[]) => void;
  canSort?: (item: T) => boolean;
};

export function SilkeSortableList<T>({
  items,
  listId,
  triggerState = 'drop',
  children,
  showSortAsBox,
  disabled,
  canSort,
  onSort,
}: SilkeSortableListProps<T>) {
  const internalListId = useMemo(() => listId || generateGuid(), [listId]);
  let cl = '';
  if (showSortAsBox) cl += ' ' + styles.sortAsBox;
  return (
    <>
      {disabled
        ? items.map((item, index) => children(item, index))
        : items.map((item, index) => (
            <SilkeSortableItemWrapper
              key={index}
              listId={internalListId}
              triggerState={triggerState}
              items={items}
              className={cl}
              index={index}
              disabled={(canSort && !canSort(item)) || false}
              onSort={onSort}
            >
              {children(item, index)}
            </SilkeSortableItemWrapper>
          ))}
    </>
  );

  // return (
  //   <SilkeBox column {...(rest as any)} className={cl.trim()}>
  //     {disabled
  //       ? items.map((item, index) => children(item, index))
  //       : items.map((item, index) => (
  //           <SilkeSortableItemWrapper
  //             key={index}
  //             listId={internalListId}
  //             triggerState={triggerState}
  //             items={items}
  //             index={index}
  //             onSort={onSort}
  //           >
  //             {children(item, index)}
  //           </SilkeSortableItemWrapper>
  //         ))}
  //   </SilkeBox>
  // );
}