import { AuthContext } from '@context-providers/auth-context-provider'
import { RootDocument } from '@pages/root-document'
import appCss from '@styles/styles.css?url'
import { createRootRouteWithContext } from '@tanstack/react-router'

import { z } from 'zod'

type RouterContext = {
  auth: AuthContext
}

const zSharedStateParams = z.object({
  redirectUrl: z.string().optional(),
})

export type AppSearchParams = z.infer<typeof zSharedStateParams>

/**
 * all routes are rendered with auth context
 */
export const Route = createRootRouteWithContext<RouterContext>()({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        name: 'robots',
        content: 'noindex, nofollow',
      },
      {
        title: '<%schema.name%>',
      },
      {
        name: 'description',
        content: '<%schema.name%>',
      },
    ],
    links: [
      {
        rel: 'stylesheet',
        href: appCss,
      },
      {
        rel: 'icon',
        type: 'image/png',
        sizes: '16x16',
        href: '/favicon-16x16.png',
      },
      {
        rel: 'icon',
        type: 'image/png',
        sizes: '32x32',
        href: '/favicon-32x32.png',
      },
      {
        rel: 'apple-touch-icon',
        type: 'image/png',
        sizes: '180x180',
        href: '/apple-touch-icon.png',
      },
      {
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.ico',
      },
      {
        rel: 'manifest',
        href: '/site.webmanifest',
      },
    ],
  }),
  shellComponent: RootDocument,
  validateSearch: zSharedStateParams,
})
