@react.component
let make = () => {

  module Form = {
    type proto = HTTP | HTTPS;
    type urlStyle =  VHOST | PATH;

    type t = {
      protocol: option<proto>,
      endpoint: option<string>,
      url: option<urlStyle>,
      region: option<string>,
      keyId: option<string>,
      secretKey: option<string>,
    }

    type e = 
    | UndefinedParameter
    

    let make = () => { protocol: None, endpoint: None, url: None, region: None, keyId: None, secretKey: None }

    let _build_unsafe = f => {
      open Belt.Option

      {
        S3.endpoint: Some({ 
          protocol: switch(f.protocol -> getExn) { | HTTP => "http" | _ => "https" }, 
	        hostname: f.endpoint -> getExn, 
	        path: "/" 
        }),
        credentials: Some({ 
	        accessKeyId: f.keyId -> getExn, 
	        secretAccessKey: f.secretKey -> getExn,
        }),
        tls: Some((f.protocol -> getExn) == HTTPS),
        forcePathStyle: Some((f.url -> getExn) == PATH),
        region: Some(f.region -> getExn),
      }
    }

    let build: t => Belt.Result.t<S3.config, e> = f => {
      switch(f -> _build_unsafe) {
      | config => Ok(config)
      | exception Not_found => Error(UndefinedParameter)
      }
    }
  }

  let (form, updateForm) = React.useState(_ => Form.make());

  let login = _ => {
    Js.log(form -> Form.build)
  }

  let setProtocol = evt => {
    let value = switch (ReactEvent.Form.target(evt)["value"]) {
    | "http" => Form.HTTP
    | _ => Form.HTTPS
    }
    updateForm(form => {...form, protocol: Some(value)})
  }

  let setEndpoint = evt => {
    let value = (ReactEvent.Form.target(evt)["value"])
    updateForm(form => {...form, endpoint: Some(value) })
  }

  let setRegion = _ => ()

  let setUrlStyle = evt => {
    let value = switch (ReactEvent.Form.target(evt)["value"]) {
    | "path" => Form.PATH
    | _ => Form.VHOST
    }
    updateForm(form => {...form, url: Some(value)})
  }

  let setKeyId = _ => ()
  let setSecretKey = _ => ()

  <section className="menu">
    <div className="menu-title">{ "Configuration"->React.string }</div>
    <form>
      <fieldset>
        <legend> { `Réseau` -> React.string } </legend>
	<div className="group">
          <select name="protocol" onChange={setProtocol}>
            <option value="https">{ "https://"->React.string }</option>
            <option value="http">{ "http://"->React.string }</option>
          </select>
          <input name="endpoint" type_="text" placeholder="garage.example.tld" onChange={setEndpoint} />
	</div>
	<div className="group">
          <input name="region" type_="text" placeholder="garage" onChange={setRegion} />
	  <select name="urlStyle" onChange={setUrlStyle} >
	    <option value="path">{ "chemin"->React.string }</option>
	    <option value="vhost">{ `hôte`->React.string }</option>
	  </select>
	</div>
      </fieldset>

      <fieldset>
        <legend> { "Authentification"->React.string }</legend>
	<div className="group">
          <input name="keyId" type_="text" placeholder="GKxxx" onChange={setKeyId}/>
	</div>
	<div className="group">
          <input name="secretKey" type_="password" placeholder="************" onChange={setSecretKey} />
	</div>
      </fieldset>

      <input className="primary" type_="button" onClick={login} />
    </form>
  </section>
}