import { useUser } from "#lib/auth";
import { demoEnabled } from "#lib/demo";
import { createForm, required } from "@modular-forms/solid";
import { useAction, useSubmission } from "@solidjs/router";
import { Component, Show } from "solid-js";
import { ButtonSpinner, ConfirmButton } from "../../../../components/buttons";
import { Input } from "../../../../components/form/inputs";
import { SaveIcon } from "../../../../components/icons";
import { updateProject, useProject } from "../../../admin/data/project";
import { FormLayout, useDomainValidator } from "../../components/util";

type UpdateProjectForm = {
  title: string;
  domain: string;
};

const Settings: Component = function () {
  const project = useProject();
  const updatingProject = useSubmission(updateProject);
  const submitUpdateProject = useAction(updateProject);
  const user = useUser();
  const domainValidator = useDomainValidator(() => project()?.domain);
  const [projectForm, { Form, Field }] = createForm<UpdateProjectForm>();

  return (
    <Show when={project()}>
      {(project) => (
        <Form
          onSubmit={(data) => {
            if (updatingProject.pending) return;

            submitUpdateProject(user()?.csrf, {
              id: project().id,
              title: data.title,
              domain: data.domain,
            });
          }}
        >
          <FormLayout>
            <Field
              name="title"
              validate={[required("Please specify your project title.")]}
            >
              {(field, props) => (
                <Input
                  {...props}
                  error={field.error}
                  placeholder="Title"
                  label="Title"
                  theme="lg"
                  required
                  value={project().title}
                />
              )}
            </Field>

            <Field name="domain" validate={[domainValidator]}>
              {(field, props) => (
                <Input
                  {...props}
                  error={field.error}
                  placeholder="mydomain.com"
                  label="Domain"
                  theme="lg"
                  disabled={demoEnabled()}
                  value={project().domain!}
                />
              )}
            </Field>
            <br />
            <div>
              <ConfirmButton type="submit">
                <ButtonSpinner show={updatingProject.pending}>
                  <SaveIcon />
                </ButtonSpinner>
                Save
              </ConfirmButton>
            </div>
          </FormLayout>
        </Form>
      )}
    </Show>
  );
};

export default Settings;