import { useRef } from 'react';

import type { FormApi } from '~/src/components/Form';
import type { CreateFlowStage } from '../../components/CreateFlow/types';

import Box from '~/src/components/Box';
import { PrereleaseMetadataForm } from '~/src/components/PrereleaseMetadataForm';
import { useListenOnEvent } from '~/src/hooks/useListenOnEvent';
import { useAppRouter } from '~/src/lib/router2';
import { parseServiceLinksParam } from '../utils';

export const InputMetadataStage: CreateFlowStage = ({ events }) => {
  const formApiRef = useRef<FormApi>(null);
  const router = useAppRouter();
  const query = router.getQuery();

  useListenOnEvent(events, 'nextButtonPressed', () => {
    formApiRef.current?.submit();
  });

  return (
    <Box maxWidth="48rem" width="100%">
      <PrereleaseMetadataForm
        apiRef={formApiRef}
        isAdvancedSettingsEnabled={false}
        isReleaseTimezoneEnabled={true}
        onSubmit={({
          albumName,
          releaseDate,
          releaseTimezone,
          upc,
          isrc,
          url,
          serviceLinks,
        }) => {
          router.setQuery({
            albumName,
            releaseDate,
            releaseTimezone,
            upc,
            isrc,
            url,
            serviceLinks: JSON.stringify(serviceLinks),
            stage: 'image',
          });
        }}
        config={{
          albumName: { initialValue: query.albumName, required: true },
          releaseDate: { initialValue: query.releaseDate, required: true },
          releaseTimezone: { initialValue: query.releaseTimezone },
          upc: { initialValue: query.upc },
          isrc: { initialValue: query.isrc },
          url: { initialValue: query.url },
          serviceLinks: {
            initialValue: query.serviceLinks
              ? parseServiceLinksParam(query.serviceLinks)
              : undefined,
          },
        }}
      />
    </Box>
  );
};