import { getBeatsFromZero } from '@suno/studiokit/timeMapping';

import logWebUserEvent from '@/logging/logWebUserEvent';

import { getAnalyticsToolName } from '../EditModeContext';
import { CanvasRegion } from './CanvasRenderer';
import { EditCanvasRenderContext } from './EditCanvasRenderContext';

export default function makeSelectedLyricsRegion({
  timing,
  selectedLyricsTiming,
  beatsToCanvasPx,
  timelineWrapperRect,
  sectionHeight,
  setSelection,
  editMode,
  editSessionId,
  clipId,
  alignedLyricsFocused,
}: EditCanvasRenderContext): CanvasRegion {
  if (!selectedLyricsTiming || !alignedLyricsFocused) return {};
  const startBeats = getBeatsFromZero(selectedLyricsTiming[0], timing);
  const endBeats = getBeatsFromZero(selectedLyricsTiming[1], timing);
  const startX = Math.max(0, beatsToCanvasPx(startBeats));
  const endX = Math.min(timelineWrapperRect.width, beatsToCanvasPx(endBeats));

  const middleY = timelineWrapperRect.height / 2 + sectionHeight / 2;
  const middleX = (startX + endX) / 2;

  return {
    touchTarget: {
      bounds: {
        top: middleY - 20,
        bottom: middleY + 20,
        left: middleX - 50,
        right: middleX + 50,
      },
      onMouseDown: () => {
        if (selectedLyricsTiming) {
          setSelection(selectedLyricsTiming);
          logWebUserEvent({
            actionName: 'MakeWaveformSelection',
            context: {
              startSeconds: Math.min(...selectedLyricsTiming),
              endSeconds: Math.max(...selectedLyricsTiming),
              editTool: getAnalyticsToolName(editMode),
              editSessionId: editSessionId || 'MISSING_EDIT_SESSION_ID',
              editingClipId: clipId,
              actionIndex: -1, // todo?
              inputType: 'timeline-section-click',
            },
          });
        }
      },
      hoverCursor: 'pointer',
    },
    render: (ctx: CanvasRenderingContext2D, hovered: boolean) => {
      ctx.fillStyle = '#64AAFF' + (hovered ? '66' : '33');
      ctx.fillRect(startX, 0, endX - startX, timelineWrapperRect.height);
      ctx.fillStyle = '#ffffffff';
      ctx.beginPath();
      ctx.roundRect(middleX - 50, middleY - 20, 100, 40, 20);
      ctx.closePath();
      ctx.fill();
      ctx.fillStyle = '#111111';
      ctx.font =
        '14px "PP Neue Montreal", "Neue Montreal", ui-sans-serif, system-ui, sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('Select', middleX, middleY + 1);
    },
  };
}