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

import StudioContext from '@/components/studio/StudioContext';
import {
  getDerivedTiming,
  getSelectionEndSeconds,
  getSelectionStartSeconds,
} from '@/components/studio/selectors';
import { useContext, useContextSelector } from '@/hooks/useContextSelector';

import CreateFormContext from '../v2/CreateFormContext';
import { CreateModes } from '../v2/types';
import { EditSelection } from './EditSelection';

export const EditSelectionWrapper = () => {
  const [editSelectionExpanded, setEditSelectionExpanded] = useContextSelector(
    CreateFormContext,
    (ctx) =>
      ctx.selectState<boolean>([
        CreateModes.STUDIO_EDIT,
        'editSelectionExpanded',
      ])
  );

  const studioContext = useContext(StudioContext);

  const selectionStartSeconds = getSelectionStartSeconds(studioContext.state);
  const selectionEndSeconds = getSelectionEndSeconds(studioContext.state);

  const onStartSecondsChange = useCallback(
    (startSeconds: number) => {
      studioContext.setState((prevState) => ({
        ...prevState,
        selection: {
          ...prevState.selection,
          anchorBeats: getBeatsFromZero(
            startSeconds,
            getDerivedTiming(prevState)
          ),
        },
      }));
    },
    [studioContext.setState]
  );

  const onEndSecondsChange = useCallback(
    (endSeconds: number) => {
      studioContext.setState((prevState) => ({
        ...prevState,
        selection: {
          ...prevState.selection,
          focusBeats: getBeatsFromZero(endSeconds, getDerivedTiming(prevState)),
        },
      }));
    },
    [studioContext.setState]
  );

  return (
    <EditSelection
      isOpen={editSelectionExpanded}
      startSeconds={selectionStartSeconds}
      endSeconds={selectionEndSeconds}
      onStartSecondsChange={onStartSecondsChange}
      onEndSecondsChange={onEndSecondsChange}
      onOpenChange={setEditSelectionExpanded}
    />
  );
};