import * as React from 'react';
import { NextPage } from 'next';
import { getFormValues } from '@theoryofnekomata/formxtra';
import * as Freeform from '@tesseract-design/web-freeform-react';
import * as Formatted from '@tesseract-design/web-formatted-react';
import * as Action from '@tesseract-design/web-action-react';
import {Refractor} from '@modal-sh/react-refractor';

const RegistrationFormPage: NextPage = () => {
  const [values, setValues] = React.useState({} as Record<string, unknown>);

  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault();
    const newValues = getFormValues(e.currentTarget);
    setValues(newValues);
  };

  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    e.preventDefault();
    const form = e.currentTarget.form;
    if (!form) {
      return;
    }
    const newValues = getFormValues(form);
    setValues(newValues);
  };

  return (
    <main className="my-16 md:my-32">
      <div className="container mx-auto px-4">
        <h1>
          Registration Form
        </h1>
        <p>
          Input your data in order to gain access to the functions of this service.
        </p>
        <form onSubmit={handleSubmit}>
          <fieldset className="contents">
            <legend className="sr-only">
              Register
            </legend>
            <div className="grid sm:grid-cols-6 gap-4">
              <div className="sm:col-span-2">
                <Freeform.TextInput
                  block
                  border
                  label="First Name"
                  name="firstName"
                  onChange={handleChange}
                />
              </div>
              <div className="sm:col-span-2">
                <Freeform.TextInput
                  block
                  border
                  label="Middle Name"
                  name="middleName"
                  onChange={handleChange}
                />
              </div>
              <div className="sm:col-span-2">
                <Freeform.TextInput
                  block
                  border
                  label="Last Name"
                  name="lastName"
                  onChange={handleChange}
                />
              </div>
              <div className="sm:col-span-3">
                <Formatted.EmailInput
                  block
                  border
                  label="Email"
                  name="email"
                  onChange={handleChange}
                />
              </div>
              <div className="sm:col-span-3">
                <Formatted.UrlInput
                  block
                  border
                  label="Website"
                  name="website"
                  onChange={handleChange}
                />
              </div>
              <div className="sm:col-span-2">
                <Formatted.PhoneNumberInput
                  country="PH"
                  block
                  border
                  label="Phone"
                  name="phone"
                  onChange={handleChange}
                  enhanced
                />
              </div>
              <div className="sm:col-span-2">
                <Freeform.MaskedTextInput
                  block
                  border
                  label="Password"
                  name="password"
                  onChange={handleChange}
                  enhanced
                />
              </div>
              <div className="sm:col-span-2">
                <Freeform.MaskedTextInput
                  block
                  border
                  label="Confirm Password"
                  name="confirmPassword"
                  onChange={handleChange}
                  enhanced
                />
              </div>
              <div className="sm:col-span-6 text-center">
                <div
                  className="sm:flex items-center justify-end space-y-4 sm:space-y-0 sm:space-x-4"
                >
                  <small>
                    By registering, you agree to the <a href="#">Terms</a> of this service.
                  </small>
                  {' '}
                  <div>
                    <Action.ActionButton
                      variant="filled"
                      block
                      type="submit"
                      menuItem
                      subtext="Registration requires activation"
                    >
                      Submit
                    </Action.ActionButton>
                  </div>
                </div>
              </div>
            </div>
          </fieldset>
        </form>
        <div className="mt-4">
          <Refractor
            language="json"
            code={JSON.stringify(values, null, 2)}
          />
        </div>
      </div>
    </main>
  )
}

export default RegistrationFormPage;