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 { createTrackApi } from '~/src/lib/songwhipApi/tracks';
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 { ChooseTrackStage } from './ChooseTrackStage';

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

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

    const track = await createTrackApi({
      country,
      rosterArtistIds: [rosterArtistId],
      sourceUrl: url,
    });

    dispatch(createPageAction(track));

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

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

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

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