import type { BlockTextProps } from '~/src/components/ItemPage/sections/BlockText/types';
import type { PageTitleSectionProps } from '~/src/components/ItemPage/sections/PageTitleSection';
import type { StoriesProps } from '~/src/components/ItemPage/sections/StoriesSection/types';
import type { PageSectionDefinition } from '~/src/components/ItemPage/types';

import { PAGE_CONFIG_VERSION } from '~/src/components/ItemPage/constants';
import { PageSectionTypes } from '~/src/components/ItemPage/sections/types';
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 { createCustomPageApi } from '~/src/lib/songwhipApi/customPages';
import { toBoolean } from '~/src/lib/utils/converter';
import { createPageAction } from '~/src/store/create';
import { useDispatch } from '~/src/store/redux';
import { ChooseArtistStage } from '../components/ChooseArtistStage';
import { CreateFlow } from '../components/CreateFlow';
import { assertString, optionalString } from '../components/CreateFlow/utils';
import { ExclusiveContentStage } from './ExclusiveContentStage';

export const CreateExclusiveContentPage = () => {
  const { t } = useI18n('create');
  const router = useAppRouter();
  const dispatch = useDispatch();

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

    const getSections = () => {
      const pageTitleSection: PageSectionDefinition<PageTitleSectionProps> = {
        component: PageSectionTypes.PAGE_TITLE,
      };

      const textBlockSection:
        | PageSectionDefinition<BlockTextProps>
        | undefined = message
        ? {
            component: PageSectionTypes.BLOCK_TEXT,
            props: { text: message },
          }
        : undefined;

      const storiesSection: PageSectionDefinition<StoriesProps> = {
        component: PageSectionTypes.STORIES,
        props: { items: [] },
      };

      return [pageTitleSection, textBlockSection, storiesSection].filter(
        Boolean
      );
    };

    const page = await createCustomPageApi({
      rosterArtistId,
      name: pageTitle,
      isDraft: true,
      config: {
        version: PAGE_CONFIG_VERSION,
        layout: { main: getSections() },
        addons: {
          AUTH_GATE: {
            withDspLogin: toBoolean(data.unlockWithDspLogin),
            withEmail: toBoolean(data.unlockWithEmail),
          },
        },
      },
    });

    dispatch(createPageAction(page));

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

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