/*
 * Copyright (c) 2023-2024 AccelByte Inc. All Rights Reserved
 * This is licensed software from AccelByte Inc, for limitations
 * and restrictions contact your company contract manager.
 */

import { SupportCTA } from '@accelbyte/widgets-v2/packages/od-support/components/SupportCTA/SupportCTA'
import { ArticleDetailPage } from '@accelbyte/widgets-v2/packages/od-support/pages/Article/ArticleDetailPage'
import { ArticlesPage } from '@accelbyte/widgets-v2/packages/od-support/pages/Article/ArticlesPage'
import { SupportPage } from '@accelbyte/widgets-v2/packages/od-support/pages/SupportPage/SupportPage'
import {
  supportPublicArticleBySlugFetcher,
  supportPublicArticlesFetcher,
  supportPublicTopicBySlugFetcher,
  supportPublicTopicsFetcher
} from '@accelbyte/widgets-v2/widgets/support'
import { AppWrapper } from '../AppWrapper'
import { sdk } from '../appConfig'
import React from 'react'
import { Outlet, RouteObject, json, useLoaderData } from 'react-router'

const INITIAL_SUPPORT_OFFSET = '0'
const INITIAL_SUPPORT_LIMIT = '20'

export const SupportRoute: RouteObject = {
  path: '/support',
  Component: () => {
    return (
      <AppWrapper>
        <Outlet />
        <SupportCTA />
      </AppWrapper>
    )
  },
  children: [
    {
      path: '/support',
      loader: async () => {
        const initialData = await supportPublicTopicsFetcher({
          sdk,
          queryParams: { status: 'VISIBLE', limit: INITIAL_SUPPORT_LIMIT, offset: INITIAL_SUPPORT_OFFSET }
        })
        return json(initialData)
      },
      Component: () => {
        const initialData = useLoaderData() as Awaited<ReturnType<typeof supportPublicTopicsFetcher>>

        return <SupportPage initialTopics={initialData} isLoadingMore={false} onLoadMore={() => null} />
      }
    },
    {
      path: '/support/topic/:slug',
      loader: async ({ params }) => {
        const slug = params.slug ?? ''
        const topic = await supportPublicTopicBySlugFetcher({ sdk, slug })
        const [topics, articles] = await Promise.all([
          await supportPublicTopicsFetcher({ sdk, queryParams: { status: 'VISIBLE' } }),
          await supportPublicArticlesFetcher({ sdk, queryParams: { topicId: topic.id } })
        ])

        return json({ topic, topics, articles })
      },
      Component: () => {
        const { articles, topic, topics } = useLoaderData() as any

        return (
          <ArticlesPage
            initialData={{ articles, topic, topics }}
            isLoadingMoreArticle={false}
            isLoadingMoreTopic={false}
            onLoadmoreArticle={() => null}
            onLoadmoreTopic={() => null}
          />
        )
      }
    },
    {
      path: '/support/article/:slug',
      loader: async ({ params }) => {
        const slug = params.slug ?? ''
        const [article, topics] = await Promise.all([
          await supportPublicArticleBySlugFetcher({ sdk, queryParams: { slug } }),
          await supportPublicTopicsFetcher({ sdk, queryParams: { status: 'VISIBLE' } })
        ])

        return json({ article, topics })
      },
      Component: () => {
        const { article, topics } = useLoaderData() as any

        return <ArticleDetailPage initialArticle={article} initialTopics={topics} isLoadingMoreTopic={false} onLoadmoreTopic={() => null} />
      }
    }
  ]
}