import { Meta, Story } from "@storybook/addon-docs";
import Form from "./Form";
import FormRow from "./FormRow";
import ControlledInputField from "./input/ControlledInputField";
import ControlledSecretConfirmationField from "./input/ControlledSecretConfirmationField";
import ControlledCheckboxField from "./checkbox/ControlledCheckboxField";

<Meta title="Form" />

<Story name="Creation">
  <Form
    onSubmit={console.log}
    translationPath={["sample", "form"]}
    defaultValues={{
      name: "",
      password: "",
      active: true,
    }}
  >
    <FormRow>
      <ControlledInputField name="name" />
    </FormRow>
    <FormRow>
      <ControlledSecretConfirmationField name="password" />
    </FormRow>
    <FormRow>
      <ControlledCheckboxField name="active" />
    </FormRow>
  </Form>
</Story>

<Story name="Editing">
  <Form
    onSubmit={console.log}
    translationPath={["sample", "form"]}
    defaultValues={{
      name: "trillian",
      password: "secret",
      active: true,
    }}
  >
    <FormRow>
      <ControlledInputField name="name" />
    </FormRow>
    <FormRow>
      <ControlledSecretConfirmationField name="password" />
    </FormRow>
    <FormRow>
      <ControlledCheckboxField name="active" />
    </FormRow>
  </Form>
</Story>

<Story name="GlobalConfiguration">
  <Form
    onSubmit={console.log}
    translationPath={["sample", "form"]}
    defaultValues={{
      url: "",
      filter: "",
      username: "",
      password: "",
      roleLevel: "",
      updateIssues: false,
      disableRepoConfig: false,
    }}
  >
    {({ watch }) => (
      <>
        <FormRow>
          <ControlledInputField name="url" label="URL" helpText="URL of Jira installation (with context path)." />
        </FormRow>
        <FormRow>
          <ControlledInputField name="filter" label="Project Filter" helpText="Filters for jira project key." />
        </FormRow>
        <FormRow>
          <ControlledCheckboxField
            name="updateIssues"
            label="Update Jira Issues"
            helpText="Enable the automatic update function."
          />
        </FormRow>
        <FormRow hide={watch("filter")}>
          <ControlledInputField
            name="username"
            label="Username"
            helpText="Jira username for connection."
            className="is-half"
          />
          <ControlledInputField
            name="password"
            label="Password"
            helpText="Jira password for connection."
            type="password"
            className="is-half"
          />
        </FormRow>
        <FormRow hide={watch("filter")}>
          <ControlledInputField
            name="roleLevel"
            label="Role Visibility"
            helpText="Defines for which Project Role the comments are visible."
          />
        </FormRow>
        <FormRow>
          <ControlledCheckboxField
            name="disableRepoConfig"
            label="Do not allow repository configuration"
            helpText="Do not allow repository owners to configure jira instances."
          />
        </FormRow>
      </>
    )}
  </Form>
</Story>

<Story name="RepoConfiguration">
  <Form
    onSubmit={console.log}
    translationPath={["sample", "form"]}
    defaultValues={{
      url: "",
      option: "",
      anotherOption: "",
      disableA: false,
      disableB: false,
      disableC: true,
    }}
  >
    <ControlledInputField name="url" />
    <ControlledInputField name="option" />
    <ControlledInputField name="anotherOption" />
    <ControlledCheckboxField name="disableA" />
    <ControlledCheckboxField name="disableB" />
    <ControlledCheckboxField name="disableC" />
  </Form>
</Story>

<Story name="ReadOnly">
  <Form
    onSubmit={console.log}
    translationPath={["sample", "form"]}
    defaultValues={{
      name: "trillian",
      password: "secret",
      active: true,
    }}
    readOnly
  >
    <FormRow>
      <ControlledInputField name="name" />
    </FormRow>
    <FormRow>
      <ControlledSecretConfirmationField name="password" />
    </FormRow>
    <FormRow>
      <ControlledCheckboxField name="active" />
    </FormRow>
  </Form>
</Story>
