/** @jsxRuntime classic */
/** @jsx jsx */

import { FC } from 'react';
import { jsx } from '@emotion/react';
import { useMiddlewareContext } from '../../hooks/useMiddlewareContext';
import { ECalendarView, IDraggableProps } from '../../types';
import { oneHourHeight, oneHourWidth } from '../../utils/timeUtils';
import { calculateNewDate } from '../../utils';

export enum EAxis {
  ALL,
  VERTICAL,
  HORIZONTAL,
}

export const Draggable: FC<IDraggableProps> = ({ item, delta, Component }) => {
  const { options } = useMiddlewareContext();
  const { view = ECalendarView.VERTICAL } = options || {};

  let startDate = item?.startDate || '';
  let endDate = item?.endDate || '';

  if (item) {
    const size = view === ECalendarView.VERTICAL ? oneHourHeight : oneHourWidth;

    const minutesDifference = Math.round(Number(delta) * (60 / size));

    startDate = calculateNewDate(item.startDate, minutesDifference);
    endDate = calculateNewDate(item.endDate, minutesDifference);
  }

  return (
    <div css={{ cursor: 'grabbing' }}>
      {item && <Component event={{ ...item, startDate, endDate }} />}
    </div>
  );
};