open CreateElement
open Config

let labelledInput labelValue minValue inputValue update writeDuration =
  label
    ~attributes:[| className "g-Form__Label" |]
    ~eventListeners:
      [|
        onInput (fun e ->
            match
              EventTarget.value (Event.target e)
              |> Option.flatMap Belt.Int.fromString
            with
            | Some n ->
                let () = update n in
                writeDuration ()
            | None -> ());
      |]
    ~children:
      [|
        text labelValue;
        input_
          ~attributes:
            [|
              className "g-Form__Input";
              type_ "number";
              min_ (Js.Int.toString minValue);
              value (Js.Int.toString inputValue);
            |]
          ();
      |]
    ()

let render initialConfig onStart =
  let config = ref initialConfig in
  let duration = text (Duration.prettyPrint (getDuration !config)) in
  let wd () =
    Element.setTextContent duration (Duration.prettyPrint (getDuration !config))
  in
  div
    ~children:
      [|
        header
          ~attributes:[| className "g-Layout__Header" |]
          ~children:[| text "Tabata timer" |]
          ();
        form
          ~attributes:[| className "g-Form" |]
          ~eventListeners:
            [|
              onSubmit (fun e ->
                  let () = Event.preventDefault e in
                  onStart !config);
            |]
          ~children:
            [|
              labelledInput "prepare" 0 !config.prepare
                (fun n -> config := { !config with prepare = n })
                wd;
              labelledInput "tabatas" 1 !config.tabatas
                (fun n -> config := { !config with tabatas = n })
                wd;
              labelledInput "cycles" 1 !config.cycles
                (fun n -> config := { !config with cycles = n })
                wd;
              labelledInput "work" 5 !config.work
                (fun n -> config := { !config with work = n })
                wd;
              labelledInput "rest" 5 !config.rest
                (fun n -> config := { !config with rest = n })
                wd;
              div
                ~attributes:[| className "g-Form__Duration" |]
                ~children:[| text "duration"; div ~children:[| duration |] () |]
                ();
              button
                ~attributes:[| className "g-Form__Start" |]
                ~children:[| text "start" |]
                ();
            |]
          ();
      |]
    ()