import { _ } from "@/lib/translation"
import { serverClient } from "@/lib/trpc/server"
import { request } from "@/lib/graphql/request"
import { GetAccountPage } from "@/lib/graphql/Query/AccountPage.graphql"

import { Lang } from "@/constants/languages"

import MaxWidth from "@/components/MaxWidth"
import Overview from "@/components/MyPages/Blocks/Overview"
import UpcomingStays from "@/components/MyPages/Blocks/Overview/UpcomingStays"
import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"

import styles from "./page.module.css"

import {
  ContentEntries,
  DynamicContentComponents,
  DynamicContent,
} from "@/types/requests/myPages/accountpage"
import {
  AccountPageContentItem,
  GetAccountPageData,
} from "@/types/requests/myPages/accountpage"
import type { LangParams, PageArgs } from "@/types/params"
import { User } from "@/types/user"

export default async function MyPageOverview({ params }: PageArgs<LangParams>) {
  const user = await serverClient().user.get()
  const response = await request<GetAccountPageData>(
    GetAccountPage,
    {
      locale: params.lang,
      url: "/my-pages/overview",
    },
    {
      tags: [`'/my-pages/overview',-en`],
    }
  )

  if (!response.data?.all_account_page?.total) {
    console.log("#### DATA ####")
    console.log(response.data)
    throw new Error("Not found")
  }

  const pageData = response.data.all_account_page.items[0]

  function DynamicComponent({
    user,
    lang,
    content,
  }: {
    content: DynamicContent
    lang: Lang
    user: User
  }) {
    console.log({ content })
    switch (content.component) {
      case DynamicContentComponents.membership_overview:
        return <Overview user={user} />
      case DynamicContentComponents.benefits:
      case DynamicContentComponents.previous_stays:
        return null
      case DynamicContentComponents.upcoming_stays:
        return <UpcomingStays lang={lang} stays={user.stays} />
      default:
        return null
    }
  }

  function Content({ content }: { content: AccountPageContentItem[] }) {
    return (
      <>
        {content.map((item) => {
          switch (item.__typename) {
            case ContentEntries.AccountPageContentDynamicContent:
              return (
                <DynamicComponent
                  user={user}
                  lang={params.lang}
                  content={item.dynamic_content}
                />
              )
            case ContentEntries.AccountPageContentShortcuts:
              const shortcuts = item.shortcuts.shortcuts.map(
                (shortcut) => shortcut.linkConnection.edges[0].node
              )
              return (
                <Shortcuts
                  shortcuts={shortcuts}
                  subtitle={item.preamble}
                  title={item.title}
                />
              )
            default:
              return null
          }
        })}
      </>
    )
  }

  return (
    <MaxWidth className={styles.blocks} tag="main">
      <Content content={pageData.content} />
    </MaxWidth>
  )
}