import type { StoriesAudio } from '~/src/components/ItemPage/sections/StoriesSection/types';
import type {
  UploadedVideoMedia,
  VideoMedia,
} from '~/src/components/ItemPage/sections/VideoSection/types';
import type { ItemContext } from '~/src/components/ItemPage/types';
import type { SelectedCustomPage } from '~/src/store/types';

import { ActionableBanner } from '~/src/components/Banner';
import { getEncryptingItems } from '~/src/components/ItemPage/sections/StoriesSection/utils';
import { PageSectionTypes } from '~/src/components/ItemPage/sections/types';
import { isUploadedVideo } from '~/src/components/ItemPage/sections/VideoSection/types';
import { NotificationType } from '~/src/components/Notification';
import { useI18n } from '~/src/lib/i18n';

interface CustomPageBannerProps {
  customPage: SelectedCustomPage;
  itemContext: ItemContext;
  height: string;
}

export const CustomPageBanner = ({
  customPage,
  itemContext,
  height,
}: CustomPageBannerProps) => {
  const { t } = useI18n('item');

  if (!customPage.userCanEdit) return null;

  const allEncryptableItems: (StoriesAudio | UploadedVideoMedia)[] = [];
  for (const section of itemContext.layout.main) {
    if (section.component === PageSectionTypes.STORIES) {
      const items = section.props?.items as StoriesAudio[] | undefined;
      if (items) {
        allEncryptableItems.push(...items);
      }
    } else if (section.component === PageSectionTypes.EXCLUSIVE_VIDEO) {
      const items = section.props?.items as VideoMedia[] | undefined;
      if (items) {
        for (const item of items) {
          if (isUploadedVideo(item)) {
            allEncryptableItems.push(item);
          }
        }
      }
    }
  }

  if (getEncryptingItems(allEncryptableItems).length === 0) return null;

  return (
    <ActionableBanner
      type={NotificationType.INFO}
      message={t('banners.encryptionInProgress')}
      height={height}
    />
  );
};