import { EntityWebhook } from "@toolctrl/db/prisma-browser";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { DefaultLogActions } from "~/application/dtos/shared/DefaultLogActions";
import FormGroup from "~/components/ui/forms/FormGroup";
import InputSelect from "~/components/ui/input/InputSelect";
import InputText from "~/components/ui/input/InputText";

interface Props {
  item?: EntityWebhook;
}

export default function EntityWebhookForm({ item }: Props) {
  const { t } = useTranslation();
  const [action, setAction] = useState<string>(item?.action ?? "Created");
  const [method, setMethod] = useState<string>(item?.method ?? "POST");
  const [endpoint, setEndpoint] = useState<string>(item?.endpoint ?? "");

  return (
    <FormGroup id={item?.id} editing={true}>
      {/* <input type="hidden" name="order" value={order} hidden readOnly /> */}
      <InputSelect
        name="webhook-action"
        title={t("models.entityWebhook.action")}
        value={action}
        setValue={(e) => setAction(e?.toString() ?? "")}
        options={[
          {
            name: t("models.entityWebhook.actions.created"),
            value: DefaultLogActions.Created,
          },
          {
            name: t("models.entityWebhook.actions.updated"),
            value: DefaultLogActions.Updated,
          },
          {
            name: t("models.entityWebhook.actions.deleted"),
            value: DefaultLogActions.Deleted,
          },
        ]}
        required
      />
      <InputSelect
        name="webhook-method"
        title={t("models.entityWebhook.method")}
        value={method}
        setValue={(e) => setMethod(e?.toString() ?? "")}
        options={[
          {
            name: "POST",
            value: "POST",
          },
          {
            name: "GET",
            value: "GET",
            disabled: true,
          },
        ]}
        required
      />
      <InputText name="webhook-endpoint" title={t("models.entityWebhook.endpoint")} value={endpoint} setValue={setEndpoint} required />
    </FormGroup>
  );
}