import { useAppToast } from '~/src/components/NextApp/lib/CoreUi';
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 { createAlbumApi } from '~/src/lib/songwhipApi/albums';
import { useTracker } from '~/src/lib/tracker/useTracker';
import wait from '~/src/lib/utils/wait';
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 } from '../components/CreateFlow/utils';
import { ChooseAlbumStage } from './ChooseAlbumStage';

export const CreateAlbumPage = () => {
  const { t } = useI18n('create');
  const router = useAppRouter();
  const { trackEvent } = useTracker();
  const country = useSelector(selectUserCountry);
  const appToast = useAppToast();
  const dispatch = useDispatch();

  const handleSubmit = async (data: Record<string, unknown>) => {
    const rosterArtistId = assertString(data, 'rosterArtistId');
    const sourceUrl = assertString(data, 'sourceUrl');

    const album = await createAlbumApi({
      rosterArtistIds: [rosterArtistId],
      sourceUrl,
      country,
      isDraft: false,
    });

    dispatch(createPageAction(album));

    trackEvent({
      type: 'create-link',
      itemPagePath: `/${album.path}`,
      itemType: 'album',
      sourceUrl,
      sourceAction: 'create/album',
      serviceKey: 'songwhip-web',
    });

    wait(1000).then(() => {
      appToast({
        text: t('addedToAccount'),
        testId: 'createPageSuccessToast',
      });
    });

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

  return (
    <Page withGradient>
      <CreateFlow
        hideNextButton
        onSubmit={handleSubmit}
        stages={[
          {
            id: 'artist',
            title: t('pickArtist'),
            Component: ChooseArtistStage,
            hideNextButton: true,
          },
          {
            id: 'album',
            title: t('album.title'),
            Component: ChooseAlbumStage,
          },
        ]}
      />
      <PageMetadata title={t('album.title')} noIndex />
    </Page>
  );
};