import { Button } from "@repo/shadcn-ui/components/button";
import {
  EntityAction,
  EntityListHeader,
  EntityRowActions,
  EntityTable,
} from "@repo/shadcn-ui/components/entity-list";
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import type { CompanyDTO } from "../../common";

import { SiteForm } from "./site-form";

export function SiteSection({ company, csrfToken }: { company: CompanyDTO; csrfToken: string }) {
  const { t, i18n } = useTranslation("companies");
  const [createOpen, setCreateOpen] = useState(false);
  const [selectedId, setSelectedId] = useState<string | undefined>();
  const selected = company.sites.find((site) => site.id === selectedId);
  return (
    <div className="space-y-6">
      <EntityListHeader
        actions={<Button onClick={() => setCreateOpen(true)}>{t("newSite")}</Button>}
        locale={i18n.language}
        title={t("sites")}
      />
      <EntityTable
        columns={[
          {
            id: "name",
            label: t("name"),
            value: (site) => site.name,
            hideable: false,
            render: (site) => <span className="font-medium">{site.name}</span>,
          },
          {
            id: "address",
            label: t("addressOptional"),
            value: (site) => site.address,
            render: (site) => (
              <span className="whitespace-pre-wrap">{site.address ?? t("noAddress")}</span>
            ),
          },
          {
            id: "actions",
            label: t("actions"),
            hideable: false,
            render: (site) => (
              <EntityRowActions label={t("actions")}>
                <EntityAction onClick={() => setSelectedId(site.id)}>{t("edit")}</EntityAction>
              </EntityRowActions>
            ),
          },
        ]}
        emptyMessage={t("noSites")}
        items={company.sites}
        locale={i18n.language}
        title={t("sites")}
      />
      <FormDialog
        cancelLabel={t("cancel")}
        formActions
        onOpenChange={setCreateOpen}
        open={createOpen}
        title={t("newSite")}
      >
        <SiteForm
          companyId={company.id}
          csrfToken={csrfToken}
          onSaved={() => setCreateOpen(false)}
          showTitle={false}
        />
      </FormDialog>
      <FormDialog
        cancelLabel={t("cancel")}
        formActions
        onOpenChange={(open) => {
          if (!open) {
            setSelectedId(undefined);
          }
        }}
        open={selected !== undefined}
        title={t("editSite")}
      >
        {selected && (
          <SiteForm
            companyId={company.id}
            csrfToken={csrfToken}
            key={selected.id}
            onSaved={() => setSelectedId(undefined)}
            showTitle={false}
            site={selected}
          />
        )}
      </FormDialog>
    </div>
  );
}