import { z } from 'zod';

import { useBlockNavigation } from '@/app';
import { RequireAuth } from '@/features/auth/components/require-auth';

import { useQueryStrings } from '@/hooks/use-query-strings';
import { useModificationStore } from '@/stores/modification';

import { PromptTabID, TemplatesTabs } from './templates-tabs';

const paramsSchema = z.strictObject({
  tab: z.preprocess(v => (v ? Number(v) : undefined), z.nativeEnum(PromptTabID).default(PromptTabID.LIST)),
  active: z.preprocess(v => (v ? Number(v) : undefined), z.number().nullable().default(null))
});

export function PromptTemplatesPage() {
  const query = useQueryStrings();

  const urlData = paramsSchema.parse({
    tab: query.get('tab'),
    active: query.get('active')
  });

  const { isModified } = useModificationStore();
  useBlockNavigation(isModified);

  return (
    <RequireAuth>
      <TemplatesTabs activeID={urlData.active} tab={urlData.tab} />
    </RequireAuth>
  );
}

export default PromptTemplatesPage;