import { usePage } from "@inertiajs/react";
import { ArrowLeftIcon } from "lucide-react";

import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
import { Actions, Methods } from "@/back/lib/enums";
import Form from "@/back/Pages/DynamicPages/Form";
import type { DynamicPageModel } from "@/back/types/dynamic-pages";
import type {
  AuthProp,
  ConfigBackend,
  SingleResource,
} from "@/back/types/global";
import trans from "@/hooks/use-translations";

export default function Create({
  data,
  modelName,
}: Readonly<{
  data: SingleResource;
  modelName: string;
}>) {
  const routeName = (usePage().props.configBackend as ConfigBackend).routes
    .name;
  const { viewAny } = (usePage().props.auth as AuthProp).policies.dynamicPages;
  const dynamicPageModel = data.data as DynamicPageModel;

  // Translations.
  const transBackToList = trans("uwil-backend::back.crud_back_to_list");
  const transTitle = trans(
    route().current(`${routeName}${modelName}.duplicate`)
      ? "uwil-backend::crud.helpers.duplication_model"
      : "uwil-backend::crud.helpers.creation_model",
    {
      params: {
        model: trans(`uwil-dynamic-pages::models.classes.${modelName}`, {
          choice: 1,
        }),
      },
    },
  );

  const beforeNode = () => {
    return (
      viewAny && (
        <div className="flex justify-end items-center gap-x-1.5">
          <BtnOptionnalLinkWithTooltip
            link={route(`${routeName}${modelName}.index`)}
            content={<ArrowLeftIcon />}
            tooltipContent={<p>{transBackToList}</p>}
          />
        </div>
      )
    );
  };

  return (
    <AuthenticatedLayout title={transTitle} beforeNode={beforeNode()}>
      <Form
        model={dynamicPageModel}
        modelName={modelName}
        modelRoute={modelName}
        action={Actions.STORE}
        method={Methods.POST}
      />
    </AuthenticatedLayout>
  );
}