import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useForm } from "@inertiajs/react";
import classNames from "classnames";
import { useState } from "react";
import { u as useRoute } from "../app.js";
import { A as ActionMessage } from "./ActionMessage-s_mcCJ3s.js";
import { A as ActionSection } from "./Modal-D5yHmTM4.js";
import { C as Checkbox } from "./Checkbox-XR8K_oHK.js";
import { C as ConfirmationModal } from "./ConfirmationModal-BYr2Juy2.js";
import { D as DangerButton } from "./DangerButton-BAZynYAq.js";
import { D as DialogModal } from "./DialogModal-D0pyMzH2.js";
import { F as FormSection } from "./FormSection-DI6t3wFC.js";
import { T as TextInput, I as InputError } from "./TextInput-CMJy2hIv.js";
import { I as InputLabel } from "./InputLabel-DhqxoV6M.js";
import { P as PrimaryButton } from "./PrimaryButton-C2B8UWiv.js";
import { S as SecondaryButton } from "./SecondaryButton-G68tKuYQ.js";
import { S as SectionBorder } from "./SectionBorder-Dh4nHf2e.js";
import { u as useTypedPage } from "./useTypedPage-Do3SqtsL.js";
import "axios";
import "lodash";
import "react-dom/client";
import "@headlessui/react";
import "./SectionTitle-DnuUNpyS.js";
import "react-dom";
function APITokenManager({
  tokens,
  availablePermissions,
  defaultPermissions
}) {
  var _a, _b, _c;
  const route = useRoute();
  const createApiTokenForm = useForm({
    name: "",
    permissions: defaultPermissions
  });
  const updateApiTokenForm = useForm({
    permissions: []
  });
  const deleteApiTokenForm = useForm({});
  const [displayingToken, setDisplayingToken] = useState(false);
  const [managingPermissionsFor, setManagingPermissionsFor] = useState(null);
  const [apiTokenBeingDeleted, setApiTokenBeingDeleted] = useState(null);
  const page = useTypedPage();
  function createApiToken() {
    createApiTokenForm.post(route("api-tokens.store"), {
      preserveScroll: true,
      onSuccess: () => {
        setDisplayingToken(true);
        createApiTokenForm.reset();
      }
    });
  }
  function manageApiTokenPermissions(token) {
    updateApiTokenForm.setData("permissions", token.abilities);
    setManagingPermissionsFor(token);
  }
  function updateApiToken() {
    if (!managingPermissionsFor) {
      return;
    }
    updateApiTokenForm.put(
      route("api-tokens.update", [managingPermissionsFor]),
      {
        preserveScroll: true,
        preserveState: true,
        onSuccess: () => setManagingPermissionsFor(null)
      }
    );
  }
  function confirmApiTokenDeletion(token) {
    setApiTokenBeingDeleted(token);
  }
  function deleteApiToken() {
    if (!apiTokenBeingDeleted) {
      return;
    }
    deleteApiTokenForm.delete(
      route("api-tokens.destroy", [apiTokenBeingDeleted]),
      {
        preserveScroll: true,
        preserveState: true,
        onSuccess: () => setApiTokenBeingDeleted(null)
      }
    );
  }
  return /* @__PURE__ */ jsxs("div", { children: [
    /* @__PURE__ */ jsxs(
      FormSection,
      {
        onSubmit: createApiToken,
        title: "Create API Token",
        description: "API tokens allow third-party services to authenticate with our application on your behalf.",
        renderActions: () => /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(
            ActionMessage,
            {
              on: createApiTokenForm.recentlySuccessful,
              className: "mr-3",
              children: "Created."
            }
          ),
          /* @__PURE__ */ jsx(
            PrimaryButton,
            {
              className: classNames({
                "opacity-25": createApiTokenForm.processing
              }),
              disabled: createApiTokenForm.processing,
              children: "Create"
            }
          )
        ] }),
        children: [
          /* @__PURE__ */ jsxs("div", { className: "col-span-6 sm:col-span-4", children: [
            /* @__PURE__ */ jsx(InputLabel, { htmlFor: "name", children: "Name" }),
            /* @__PURE__ */ jsx(
              TextInput,
              {
                id: "name",
                type: "text",
                className: "mt-1 block w-full",
                value: createApiTokenForm.data.name,
                onChange: (e) => createApiTokenForm.setData("name", e.currentTarget.value),
                autoFocus: true
              }
            ),
            /* @__PURE__ */ jsx(
              InputError,
              {
                message: createApiTokenForm.errors.name,
                className: "mt-2"
              }
            )
          ] }),
          availablePermissions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "col-span-6", children: [
            /* @__PURE__ */ jsx(InputLabel, { htmlFor: "permissions", children: "Permissions" }),
            /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-1 md:grid-cols-2 gap-4", children: availablePermissions.map((permission) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("label", { className: "flex items-center", children: [
              /* @__PURE__ */ jsx(
                Checkbox,
                {
                  value: permission,
                  checked: createApiTokenForm.data.permissions.includes(
                    permission
                  ),
                  onChange: (e) => {
                    if (createApiTokenForm.data.permissions.includes(
                      e.currentTarget.value
                    )) {
                      createApiTokenForm.setData(
                        "permissions",
                        createApiTokenForm.data.permissions.filter(
                          (p) => p !== e.currentTarget.value
                        )
                      );
                    } else {
                      createApiTokenForm.setData("permissions", [
                        e.currentTarget.value,
                        ...createApiTokenForm.data.permissions
                      ]);
                    }
                  }
                }
              ),
              /* @__PURE__ */ jsx("span", { className: "ml-2 text-sm text-gray-600 dark:text-gray-400", children: permission })
            ] }) }, permission)) })
          ] })
        ]
      }
    ),
    tokens.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx(SectionBorder, {}),
      /* @__PURE__ */ jsx("div", { className: "mt-10 sm:mt-0", children: /* @__PURE__ */ jsx(
        ActionSection,
        {
          title: "Manage API Tokens",
          description: "You may delete any of your existing tokens if they are no longer needed.",
          children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: tokens.map((token) => /* @__PURE__ */ jsxs(
            "div",
            {
              className: "flex items-center justify-between",
              children: [
                /* @__PURE__ */ jsx("div", { className: "break-all dark:text-white", children: token.name }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
                  token.last_used_ago && /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-400", children: [
                    "Last used ",
                    token.last_used_ago
                  ] }),
                  availablePermissions.length > 0 ? /* @__PURE__ */ jsx(
                    PrimaryButton,
                    {
                      className: "cursor-pointer ml-6 text-sm text-gray-400 underline",
                      onClick: () => manageApiTokenPermissions(token),
                      children: "Permissions"
                    }
                  ) : null,
                  /* @__PURE__ */ jsx(
                    PrimaryButton,
                    {
                      className: "cursor-pointer ml-6 text-sm text-red-500",
                      onClick: () => confirmApiTokenDeletion(token),
                      children: "Delete"
                    }
                  )
                ] })
              ]
            },
            token.id
          )) })
        }
      ) })
    ] }) : null,
    /* @__PURE__ */ jsxs(
      DialogModal,
      {
        isOpen: displayingToken,
        onClose: () => setDisplayingToken(false),
        children: [
          /* @__PURE__ */ jsxs(DialogModal.Content, { title: "API Token", children: [
            /* @__PURE__ */ jsx("div", { children: "Please copy your new API token. For your security, it won't be shown again." }),
            /* @__PURE__ */ jsx("div", { className: "mt-4 bg-gray-100 dark:bg-gray-900 px-4 py-2 rounded-sm font-mono text-sm text-gray-500", children: (_c = (_b = (_a = page.props) == null ? void 0 : _a.jetstream) == null ? void 0 : _b.flash) == null ? void 0 : _c.token })
          ] }),
          /* @__PURE__ */ jsx(DialogModal.Footer, { children: /* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setDisplayingToken(false), children: "Close" }) })
        ]
      }
    ),
    /* @__PURE__ */ jsxs(
      DialogModal,
      {
        isOpen: !!managingPermissionsFor,
        onClose: () => setManagingPermissionsFor(null),
        children: [
          /* @__PURE__ */ jsx(DialogModal.Content, { title: "API Token Permissions", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: availablePermissions.map((permission) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("label", { className: "flex items-center", children: [
            /* @__PURE__ */ jsx(
              Checkbox,
              {
                value: permission,
                checked: updateApiTokenForm.data.permissions.includes(
                  permission
                ),
                onChange: (e) => {
                  if (updateApiTokenForm.data.permissions.includes(
                    e.currentTarget.value
                  )) {
                    updateApiTokenForm.setData(
                      "permissions",
                      updateApiTokenForm.data.permissions.filter(
                        (p) => p !== e.currentTarget.value
                      )
                    );
                  } else {
                    updateApiTokenForm.setData("permissions", [
                      e.currentTarget.value,
                      ...updateApiTokenForm.data.permissions
                    ]);
                  }
                }
              }
            ),
            /* @__PURE__ */ jsx("span", { className: "ml-2 text-sm text-gray-600 dark:text-gray-400", children: permission })
          ] }) }, permission)) }) }),
          /* @__PURE__ */ jsxs(DialogModal.Footer, { children: [
            /* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setManagingPermissionsFor(null), children: "Cancel" }),
            /* @__PURE__ */ jsx(
              PrimaryButton,
              {
                onClick: updateApiToken,
                className: classNames("ml-2", {
                  "opacity-25": updateApiTokenForm.processing
                }),
                disabled: updateApiTokenForm.processing,
                children: "Save"
              }
            )
          ] })
        ]
      }
    ),
    /* @__PURE__ */ jsxs(
      ConfirmationModal,
      {
        isOpen: !!apiTokenBeingDeleted,
        onClose: () => setApiTokenBeingDeleted(null),
        children: [
          /* @__PURE__ */ jsx(ConfirmationModal.Content, { title: "Delete API Token", children: "Are you sure you would like to delete this API token?" }),
          /* @__PURE__ */ jsxs(ConfirmationModal.Footer, { children: [
            /* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setApiTokenBeingDeleted(null), children: "Cancel" }),
            /* @__PURE__ */ jsx(
              DangerButton,
              {
                onClick: deleteApiToken,
                className: classNames("ml-2", {
                  "opacity-25": deleteApiTokenForm.processing
                }),
                disabled: deleteApiTokenForm.processing,
                children: "Delete"
              }
            )
          ] })
        ]
      }
    )
  ] });
}
export {
  APITokenManager as default
};