import { createSignal, Show } from "solid-js";
import { Formly, IValue, IField } from "solid-formly";

const form_name = "formly_usage";
const fields: IField[] = [
  {
    type: "input",
    name: "firstname",
    attributes: {
      type: "text",
      id: "firstname",
      classes: ["form-control"],
      placeholder: "Tap your first name"
    },
    rules: ["required", "min:3", "max:10"],
    messages: {
      required: "The firstname is required",
      min: "Your firstname is too short min=3",
      max: "Your firstname is too long max=10"
    }
  },
  {
    type: "input",
    name: "password",
    attributes: {
      type: "password",
      id: "password",
      classes: ["form-control"],
      placeholder: "Tap your first name",
      autocomplete: "off"
    },
    rules: ["required", "min:6", "max:10"],
    messages: {
      required: "The password is required",
      min: "Your password is too short min=6",
      max: "Your password is too long max=10"
    }
  }
];

const App = () => {
  const [values, setValues] = createSignal < any > null;

  const onSubmit = (data: IValue) => {
    setValues(data);
  };

  return (
    <>
      <Show when={values()}>
        <pre>
          <code>{JSON.stringify(values(), null, 2)}</code>
        </pre>
      </Show>
      <Formly
        form_name={props.form_name}
        fields={props.fields}
        onSubmit={onSubmit}
        btnSubmit={{
          text: "Send"
        }}
        btnReset={{
          text: "Reset",
          classes: ["outline", "btn-primary"]
        }}
        real={true}
      />
    </>
  );
};

export default App;