import Page from '~/src/components/Page';
import PageMetadata from '~/src/components/PageMetadata';
import { useI18n } from '~/src/lib/i18n';
import { useAppRouter } from '~/src/lib/router2';
import { createPrereleaseApi as createPrereleaseV2Api } from '~/src/lib/songwhipApi/prereleases/create';
import { useTracker } from '~/src/lib/tracker/useTracker';
import { createPageAction } from '~/src/store/create';
import { useDispatch, useSelector } from '~/src/store/redux';
import { selectUserCountry } from '~/src/store/session/selectors';
import { ChooseArtistStage } from '../components/ChooseArtistStage';
import { CreateFlow } from '../components/CreateFlow';
import { assertString, optionalString } from '../components/CreateFlow/utils';
import { InputMetadataStage, PickImageStage } from './components';
import { parseServiceLinksParam } from './utils';

export const CreatePrereleasePage = () => {
  const { t } = useI18n('prerelease');
  const router = useAppRouter();
  const country = useSelector(selectUserCountry);
  const { trackEvent } = useTracker();
  const dispatch = useDispatch();

  const handleSubmit = async (data: Record<string, unknown>) => {
    const rosterArtistId = assertString(data, 'rosterArtistId');
    const name = assertString(data, 'albumName');
    const upc = optionalString(data, 'upc');
    const isrc = optionalString(data, 'isrc');
    const url = optionalString(data, 'url');
    const releaseDate = optionalString(data, 'releaseDate');
    const releaseTimezone = optionalString(data, 'releaseTimezone');
    const serviceLinks = optionalString(data, 'serviceLinks');
    const imageUrl = optionalString(data, 'imageUrl');

    const links = serviceLinks
      ? parseServiceLinksParam(serviceLinks)
      : undefined;

    const page = await createPrereleaseV2Api({
      rosterArtistIds: [rosterArtistId],
      name,
      sourceCountry: country,
      sourceIsrc: isrc,
      sourceUpc: upc,
      sourceUrl: url,
      sourceLinks: links,
      releaseDate,
      releaseTimezone: releaseDate ? releaseTimezone : undefined,
      image: imageUrl,
    });

    dispatch(createPageAction(page));

    trackEvent({
      type: 'create-prerelease-page',
      itemId: page.id,
      itemName: name,
    });

    await router.push(`/draft/${page.path}`);
  };

  return (
    <Page withGradient>
      <CreateFlow
        onSubmit={handleSubmit}
        stages={[
          {
            id: 'artist',
            title: t('pickArtist'),
            Component: ChooseArtistStage,
            hideNextButton: true,
          },
          {
            id: 'metadata',
            title: t('pickMetadataHeader'),
            Component: InputMetadataStage,
          },
          {
            id: 'image',
            title: t('pickArtwork'),
            Component: PickImageStage,
          },
        ]}
      />
      <PageMetadata title={t('createPrerelease')} noIndex />
    </Page>
  );
};