"use client";
import Link from "next/link";
import { useDraft } from "@/mocks/use-draft";
import { parseChargepointDraft } from "@/mocks/drafts";
import { PageHeader } from "@/components/shared/page-header";
import { EmptyState } from "@/components/shared/panel";
import { ChargepointDetail } from "./chargepoint-detail";
import type { Authorization, DeviceConfiguration } from "./types";
import type { Location } from "@/features/locations/types";
import { paginate } from "@/lib/list-query";
export function DraftChargepointDetail({
  id,
  tab,
  locations,
  authorizationUsers,
  deviceConfigurations,
}: {
  id: string;
  tab: string;
  locations: Location[];
  authorizationUsers: Authorization[];
  deviceConfigurations: DeviceConfiguration[];
}) {
  const chargepoint = parseChargepointDraft(useDraft(id));
  const { items, ...pagination } = paginate([], 1, 25);
  if (!chargepoint || chargepoint.id !== id)
    return (
      <>
        <EmptyState
          title="Preview chargepoint unavailable"
          description="This chargepoint draft is only available in the browser tab where it was created."
        />
        <Link href="/chargepoints" className="text-primary underline">
          Back to chargepoints
        </Link>
      </>
    );
  return (
    <>
      <PageHeader
        title={chargepoint.name}
        parent={{ label: "Chargestations", href: "/chargepoints" }}
      />
      <ChargepointDetail
        authorizationUsers={authorizationUsers}
        deviceConfigurations={deviceConfigurations}
        chargepoint={chargepoint}
        locations={locations}
        sessions={items}
        pagination={pagination}
        tab={tab}
        logs={[]}
      />
    </>
  );
}