import React from 'react'
import { createStyles, Text } from '@mantine/core';
import { useListState } from '@mantine/hooks';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const useStyles = createStyles((theme) => ({
    item: {
      ...theme.fn.focusStyles(),
      display: 'flex',
      alignItems: 'center',
      borderRadius: theme.radius.md,
      border: `1px solid ${
        theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
      }`,
//      padding: `${theme.spacing.xs}px ${theme.spacing.xl}px`,
      padding: `1px ${theme.spacing.xl}px`,
      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
      marginBottom: theme.spacing.sm,
    },
  
    itemDragging: {
      boxShadow: theme.shadows.sm,
    },
  
    symbol: {
      fontSize: 30,
      fontWeight: 700,
      width: 60,
    },
  }));
  
export interface DndListProps {
    data: TData
  }
  
  export interface IProps
  {
    dragEndHandler: (p: any) => void;
    dataprops: DndListProps;
  }

  export type TDataItem =
  {
    id: string;
    name: string;
    ordernum: number;

    // position: number;
    // mass: number;
    // symbol: string;
    // name: string;
  }  

  export type TData = TDataItem[];

  const reorder = ({current, from, to }: {current: TData; from: number; to: number }) =>
  {
      const cloned = [...current];
      const item = current[from];

      cloned.splice(from, 1);
      cloned.splice(to, 0, item);

      return cloned;
  };


  export function DndList({dragEndHandler, dataprops}: IProps) 
  {
    const {data} = dataprops;
    const { classes, cx } = useStyles();
    const [state, handlers] = useListState(data);
  
    const items = state.map((item, index) => (
      <Draggable key={item.id} index={index} draggableId={item.id}>
        {(provided, snapshot) => (
          <div
            className={cx(classes.item, { [classes.itemDragging]: snapshot.isDragging })}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            ref={provided.innerRef}
          >
            <div>
              <Text>{item.name}</Text>
            </div>
          </div>
        )}
      </Draggable>
    ));
    console.log(state);

    return (
      <DragDropContext
        onDragEnd=
        {
          ({ destination, source }) =>
            {
              handlers.reorder({ from: source.index, to: destination?.index || 0 });
              console.log(state);
              dragEndHandler(
                reorder(
                  {
                    current:state, 
                    from: source.index, 
                    to: destination!.index
                  }  ));
            }
        }
      >
        <Droppable droppableId="dnd-list" direction="vertical">
          {(provided) => (
            <div {...provided.droppableProps} ref={provided.innerRef}>
              {items}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
  