import { CanvasRegion } from '@/components/edit2025/canvasRenderer/CanvasRenderer';

import { StudioContextType } from '../StudioContext';
import updateClipCreationIntent from '../actions/updateClipCreationIntent';
import updateSelection from '../actions/updateSelection';
import { minimumTrackHeight } from '../createTrack';
import getCanvasRelativeRect from '../getCanvasRelativeRect';
import {
  getSongEndBeats,
  getSongStartBeats,
  getTracksAndExpandedTakeLanes,
} from '../selectors';

export default function makeClipCreationIntentRegions(
  studioContext: StudioContextType
): CanvasRegion[] {
  const songStartBeats = getSongStartBeats(studioContext.state);
  const songEndBeats = getSongEndBeats(studioContext.state);
  const tracks = getTracksAndExpandedTakeLanes(studioContext.state);
  return tracks.flatMap(({ clipCreationIntents, id: trackId }) => {
    return clipCreationIntents.flatMap(({ id, startBeats, endBeats }) => {
      const trackHeader =
        studioContext.timelineController.trackHeadersRef.current[trackId];
      if (!trackHeader) return {};

      const trackRect = getCanvasRelativeRect(
        trackHeader.getBoundingClientRect(),
        studioContext.timelineController.getWrapperRect()
      );

      const x = studioContext.beatsToCanvasX(startBeats ?? -Infinity);
      const width = studioContext.beatsToCanvasX(endBeats ?? Infinity) - x;

      const hasCloseButton = width > 50;

      return [
        {
          touchTarget: {
            bounds: {
              top: trackRect.y,
              left: x,
              bottom: trackRect.y + trackRect.height,
              right: x + width,
            },
            hoverCursor: 'pointer',
            onMouseDown: () => {
              studioContext.setState(
                updateSelection((prev) => ({
                  ...prev,
                  focusedTrackId: trackId,
                  selectedTrackIds: [trackId],
                  anchorBeats: startBeats ?? songStartBeats,
                  focusBeats: endBeats ?? songEndBeats,
                }))
              );
            },
          },
        },
        hasCloseButton
          ? {
              touchTarget: {
                bounds: {
                  top: trackRect.y + 10,
                  left: x + width - 40,
                  bottom: trackRect.y + 40,
                  right: x + width - 10,
                },
                hoverCursor: 'pointer',
                onMouseDown: () => {
                  studioContext.setState(
                    updateClipCreationIntent(id, () => null)
                  );
                },
              },
              renderTop: (ctx, hovered) => {
                const halfMinTrackHeight = minimumTrackHeight / 2;
                ctx.beginPath();
                ctx.arc(
                  x + width - halfMinTrackHeight,
                  trackRect.y + halfMinTrackHeight,
                  10,
                  0,
                  2 * Math.PI
                );
                ctx.fillStyle = '#0008';
                ctx.fill();
                ctx.closePath();
                ctx.beginPath();
                const centerX = x + width - halfMinTrackHeight;
                const centerY = trackRect.y + halfMinTrackHeight;
                ctx.moveTo(centerX, centerY);
                ctx.lineTo(centerX + 3, centerY + 3);
                ctx.lineTo(centerX - 3, centerY - 3);
                ctx.moveTo(centerX + 3, centerY - 3);
                ctx.lineTo(centerX - 3, centerY + 3);
                ctx.closePath();
                ctx.strokeStyle = hovered ? '#fff' : '#fff5';
                ctx.stroke();
              },
            }
          : {},
      ];
    });
  });
}