import JsonToHtml from "@/components/JsonToHtml"
import CurrentBenefitsBlock from "@/components/MyPages/Blocks/Benefits/CurrentLevel"
import NextLevelBenefitsBlock from "@/components/MyPages/Blocks/Benefits/NextLevel"
import Overview from "@/components/MyPages/Blocks/Overview"
import CurrentPointsBalance from "@/components/MyPages/Blocks/Points/CurrentPointsBalance"
import EarnAndBurn from "@/components/MyPages/Blocks/Points/EarnAndBurn"
import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
import PreviousStays from "@/components/MyPages/Blocks/Stays/Previous"
import SoonestStays from "@/components/MyPages/Blocks/Stays/Soonest"
import UpcomingStays from "@/components/MyPages/Blocks/Stays/Upcoming"
import { removeMultipleSlashes } from "@/utils/url"

import {
  AccountPageContentProps,
  ContentProps,
} from "@/types/components/myPages/myPage/accountPage"
import {
  ContentEntries,
  DynamicContentComponents,
} from "@/types/components/myPages/myPage/enums"

function DynamicComponent({ component, props }: AccountPageContentProps) {
  switch (component) {
    case DynamicContentComponents.membership_overview:
      return <Overview {...props} />
    case DynamicContentComponents.previous_stays:
      return <PreviousStays {...props} />
    case DynamicContentComponents.soonest_stays:
      return <SoonestStays {...props} />
    case DynamicContentComponents.upcoming_stays:
      return <UpcomingStays {...props} />
    case DynamicContentComponents.current_benefits:
      return <CurrentBenefitsBlock {...props} />
    case DynamicContentComponents.next_benefits:
      return <NextLevelBenefitsBlock {...props} />
    case DynamicContentComponents.my_points:
      return <CurrentPointsBalance {...props} />
    case DynamicContentComponents.expiring_points:
      // TODO: Add once available
      // return <ExpiringPoints />
      return null
    case DynamicContentComponents.earn_and_burn:
      return <EarnAndBurn {...props} />
    default:
      return null
  }
}

export default function Content({ lang, content }: ContentProps) {
  return content.map((item, idx) => {
    switch (item.__typename) {
      case ContentEntries.AccountPageContentDynamicContent:
        const link = item.dynamic_content.link.linkConnection.edges.length
          ? {
              href:
                item.dynamic_content.link.linkConnection.edges[0].node
                  .original_url ||
                removeMultipleSlashes(
                  `/${lang}/${item.dynamic_content.link.linkConnection.edges[0].node.url}`
                ),
              text: item.dynamic_content.link.link_text,
            }
          : null

        const componentProps = {
          lang,
          title: item.dynamic_content.title,
          // TODO: rename preamble to subtitle in Contentstack?
          subtitle: item.dynamic_content.preamble,
          ...(link && { link }),
        }
        return (
          <DynamicComponent
            key={`${item.dynamic_content.title}-${idx}`}
            component={item.dynamic_content.component}
            props={componentProps}
          />
        )
      case ContentEntries.AccountPageContentShortcuts:
        return (
          <Shortcuts
            key={`${item.shortcuts.title}-${idx}`}
            shortcuts={item.shortcuts.shortcuts}
            subtitle={item.shortcuts.preamble}
            title={item.shortcuts.title}
          />
        )
      case ContentEntries.AccountPageContentTextContent:
        return (
          <section key={`${item.__typename}-${idx}`}>
            <JsonToHtml
              embeds={item.text_content.content.embedded_itemsConnection.edges}
              nodes={item.text_content.content.json.children}
            />
          </section>
        )
      default:
        return null
    }
  })
}
