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 { createArtistApi } from '~/src/lib/songwhipApi/artists';
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';

export const CreateArtistPage = () => {
  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, 'artistUrl');
    const rosterArtistId = assertString(data, 'rosterArtistId');

    const page = await createArtistApi({
      country,
      rosterArtistId,
      isHidden: false,
    });

    const itemPagePath = `/${page.path}`;

    dispatch(createPageAction(page));

    trackEvent({
      type: 'create-link',
      itemPagePath,
      itemType: 'artist',
      sourceUrl: url,
      sourceAction: 'create/artist',
      serviceKey: 'songwhip-web',
    });

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

    await router.push(itemPagePath);
  };

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