import { FormDialog } from "@repo/rdx-ui/components/form-dialog";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import { Button } from "@repo/shadcn-ui/components/button";
import { useTranslation } from "react-i18next";

import { CompanyEditorDialog } from "../../../companies/shared/ui/company-editor-dialog";
import { CompanyForm } from "../../../companies/shared/ui/company-form";
import { InterventionForm } from "../../../interventions";
import { TicketForm } from "../../../tickets";
import { BlockState } from "../../shared";
import { useDashboardQuickCreateController } from "../controllers";
import type { DashboardQuickCreateProps } from "../types";

export function DashboardQuickCreate(props: DashboardQuickCreateProps) {
  const { kind, companyId, onClose, onNavigate } = props;
  const {
    selectedCompany,
    setSelectedCompany,
    addingCompany,
    setAddingCompany,
    companies,
    tickets,
    interventions,
    saved,
  } = useDashboardQuickCreateController(props);
  const { t } = useTranslation("companies");

  return (
    <>
      <FormDialog
        cancelLabel={t("cancel")}
        formActions={kind !== "asset" && kind !== "resource"}
        onOpenChange={(open) => {
          if (!open) {
            onClose();
          }
        }}
        open
        title={t(`dashboard.create.${kind}`)}
        wide={kind === "ticket" || kind === "intervention"}
      >
        {kind === "company" && <CompanyForm onSaved={saved} showTitle={false} />}
        {kind === "ticket" && (
          <BlockState empty={false} emptyText="" query={tickets}>
            {tickets.data && (
              <TicketForm
                data={tickets.data}
                onSaved={saved}
                {...(companyId ? { scope: companyId } : {})}
              />
            )}
          </BlockState>
        )}
        {kind === "intervention" && (
          <BlockState empty={false} emptyText="" query={interventions}>
            {interventions.data && (
              <InterventionForm
                data={interventions.data}
                onSaved={saved}
                {...(companyId ? { scope: companyId } : {})}
              />
            )}
          </BlockState>
        )}
        {(kind === "asset" || kind === "resource") && (
          <BlockState empty={false} emptyText="" query={companies}>
            <SelectWithAction
              action={{ label: t("newCompany"), onClick: () => setAddingCompany(true) }}
              id="dashboard-create-company"
              label={t("tickets.company")}
              onValueChange={setSelectedCompany}
              options={
                companies.data?.companies
                  .filter((item) => item.active)
                  .map((item) => ({ value: item.id, label: item.name })) ?? []
              }
              placeholder={t("dashboard.chooseCompany")}
              value={selectedCompany}
            />
            <p className="text-sm text-muted-foreground">{t("dashboard.chooseCompany")}</p>
            <Button
              disabled={!selectedCompany}
              onClick={() =>
                onNavigate({
                  area: "company",
                  id: selectedCompany,
                  section: kind === "asset" ? "inventory" : "resources",
                  create: true,
                })
              }
            >
              {t("dashboard.continue")}
            </Button>
          </BlockState>
        )}
      </FormDialog>
      {addingCompany && (
        <CompanyEditorDialog
          onCreated={(id) => {
            setSelectedCompany(id);
            setAddingCompany(false);
          }}
          onOpenChange={setAddingCompany}
          open
        />
      )}
    </>
  );
}