import { useState, createElement } from "react";
import { useShowToast, Stack, Heading, FieldContainer, TextInput, Divider, Select, Button } from "@contember/ui";
import { useCreateProject } from "../../mutations/project/createProject.js";
import { useForm } from "../../lib/useForm.js";
import { useRedirect } from "../../../routing/binding/useRedirect.js";
const emptyForm = {
  slug: "",
  name: "",
  dbHost: "",
  dbName: "",
  dbUser: "",
  dbPassword: "",
  dbPort: "",
  dbSsl: ""
};
const CreateProjectForm = ({ projectListLink }) => {
  const { register, values } = useForm(emptyForm);
  const [isSubmitting, setSubmitting] = useState(false);
  const createProject = useCreateProject();
  const toaster = useShowToast();
  const redirect = useRedirect();
  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    const projectSlug = values.slug;
    const secrets = [];
    if (values.dbPassword) {
      secrets.push({ key: "db.password", value: values.dbPassword });
    }
    try {
      const result = await createProject({
        projectSlug,
        name: values.name || void 0,
        config: {
          db: {
            host: values.dbHost || void 0,
            port: values.dbPort ? Number(values.dbPort) : void 0,
            user: values.dbUser || void 0,
            ssl: values.dbSsl ? values.dbSsl === "yes" : void 0,
            database: values.dbName || void 0
          }
        },
        secrets
      });
      if (result.ok) {
        redirect(projectListLink);
        toaster({
          message: `Project ${projectSlug} created. Please save following deploy token: ${result.result.deployerApiKey.token}`,
          type: "success"
        });
      } else {
        switch (result.error.code) {
          case "ALREADY_EXISTS":
            toaster({ message: `Project ${projectSlug} already exists`, type: "error" });
            break;
          case "INIT_ERROR":
            toaster({
              message: `Project ${projectSlug} initialization has failed: ${result.error.developerMessage}`,
              type: "error"
            });
            break;
        }
      }
    } catch (e2) {
      console.error(e2);
      toaster({ message: `Request has failed. Please try later.`, type: "error" });
    } finally {
      setSubmitting(false);
    }
  };
  return /* @__PURE__ */ createElement("form", {
    onSubmit
  }, /* @__PURE__ */ createElement(Stack, {
    direction: "vertical",
    gap: "xlarge"
  }, /* @__PURE__ */ createElement(Heading, {
    depth: 3
  }, "New project"), /* @__PURE__ */ createElement(FieldContainer, {
    label: "Project slug"
  }, /* @__PURE__ */ createElement(TextInput, {
    ...register("slug"),
    pattern: "[a-z][-a-z0-9]*",
    required: true
  })), /* @__PURE__ */ createElement(FieldContainer, {
    label: "Project name"
  }, /* @__PURE__ */ createElement(TextInput, {
    ...register("name"),
    placeholder: values.slug
  })), /* @__PURE__ */ createElement(Divider, null), /* @__PURE__ */ createElement(Heading, {
    depth: 3
  }, "Database credentials"), /* @__PURE__ */ createElement("p", null, "You can leave some of this fields empty to use default values."), /* @__PURE__ */ createElement(FieldContainer, {
    label: "Host"
  }, /* @__PURE__ */ createElement(TextInput, {
    ...register("dbHost")
  })), /* @__PURE__ */ createElement(FieldContainer, {
    label: "Port"
  }, /* @__PURE__ */ createElement(TextInput, {
    ...register("dbPort")
  })), /* @__PURE__ */ createElement(FieldContainer, {
    label: "Database name"
  }, /* @__PURE__ */ createElement(TextInput, {
    ...register("dbName")
  })), /* @__PURE__ */ createElement(FieldContainer, {
    label: "User"
  }, /* @__PURE__ */ createElement(TextInput, {
    ...register("dbUser")
  })), /* @__PURE__ */ createElement(FieldContainer, {
    label: "Password"
  }, /* @__PURE__ */ createElement(TextInput, {
    ...register("dbPassword")
  })), /* @__PURE__ */ createElement(FieldContainer, {
    label: "SSL"
  }, /* @__PURE__ */ createElement(Select, {
    ...register("dbSsl"),
    options: [
      { value: "", label: "default" },
      { value: "yes", label: "yes" },
      { value: "no", label: "no" }
    ]
  })), /* @__PURE__ */ createElement(Divider, null), /* @__PURE__ */ createElement(Button, {
    type: "submit",
    distinction: "primary",
    disabled: isSubmitting
  }, "Create new project")));
};
export { CreateProjectForm };
//# sourceMappingURL=CreateProjectForm.js.map
