(* The TodoMVC page, rendered from shared/reference.html. The no-JS controls
   carry the class "nojs"; app.css hides them once app.js has loaded. *)

type filter = All | Active | Completed

let filter_of_string = function "active" -> Active | "completed" -> Completed | _ -> All
let filter_name = function All -> "all" | Active -> "active" | Completed -> "completed"
let filter_path = function All -> "/" | Active -> "/active" | Completed -> "/completed"

let shows filter (t : Store.todo) =
  match filter with All -> true | Active -> not t.completed | Completed -> t.completed

let escape s =
  let b = Buffer.create (String.length s + 16) in
  String.iter
    (function
      | '&' -> Buffer.add_string b "&"
      | '<' -> Buffer.add_string b "&lt;"
      | '>' -> Buffer.add_string b "&gt;"
      | '"' -> Buffer.add_string b "&quot;"
      | '\'' -> Buffer.add_string b "&#39;"
      | c -> Buffer.add_char b c)
    s;
  Buffer.contents b

(* A hidden form that a control elsewhere submits with form="<id>". *)
let action_form b ~id ~action filter =
  Printf.bprintf b
    {|<form id="%s" method="post" action="%s" hidden><input type="hidden" name="filter" value="%s"></form>|}
    id action (filter_name filter)

let item b filter ~editing (t : Store.todo) =
  let title = escape t.title in
  let classes = List.filter_map Fun.id
      [ (if t.completed then Some "completed" else None); (if editing then Some "editing" else None) ] in
  Printf.bprintf b {|<li data-id="%d"%s><div class="view">|} t.id
    (if classes = [] then "" else Printf.sprintf {| class="%s"|} (String.concat " " classes));
  Printf.bprintf b {|<input class="toggle" type="checkbox" form="toggle-%d"%s><label>%s</label>|}
    t.id (if t.completed then " checked" else "") title;
  Printf.bprintf b {|<button class="destroy" form="destroy-%d" aria-label="Delete"></button>|} t.id;
  Printf.bprintf b
    {|<button class="nojs toggle-button" data-action="toggle" form="toggle-%d">%s</button>|}
    t.id (if t.completed then "Mark as active" else "Mark as completed");
  Printf.bprintf b {|<a class="nojs edit-link" data-action="edit" href="%s?edit=%d">Edit</a></div>|}
    (filter_path filter) t.id;
  Printf.bprintf b
    {|<form class="edit-form" method="post" action="/todos/%d/edit"><input type="hidden" name="filter" value="%s"><input class="edit" name="title" value="%s" autocomplete="off"%s></form>|}
    t.id (filter_name filter) title (if editing then " autofocus" else "");
  action_form b ~id:(Printf.sprintf "toggle-%d" t.id) ~action:(Printf.sprintf "/todos/%d/toggle" t.id) filter;
  action_form b ~id:(Printf.sprintf "destroy-%d" t.id) ~action:(Printf.sprintf "/todos/%d/destroy" t.id) filter;
  Buffer.add_string b "</li>"

(* section.todoapp: the part app.js swaps after each action. *)
let todoapp b ~filter ?editing (todos : Store.todo list) =
  let left = List.length (List.filter (fun (t : Store.todo) -> not t.completed) todos) in
  let done_ = List.length todos - left in
  Printf.bprintf b
    {|<section class="todoapp"><header class="header"><h1>todos</h1><form method="post" action="/todos"><input type="hidden" name="filter" value="%s"><input class="new-todo" name="title" placeholder="What needs to be done?" autocomplete="off"%s></form></header>|}
    (filter_name filter) (if editing = None then " autofocus" else "");
  if todos <> [] then begin
    Buffer.add_string b {|<section class="main">|};
    action_form b ~id:"toggle-all-form" ~action:"/todos/toggle-all" filter;
    Printf.bprintf b
      {|<input id="toggle-all" class="toggle-all" type="checkbox" form="toggle-all-form"%s><label for="toggle-all">Mark all as complete</label>|}
      (if left = 0 then " checked" else "");
    Buffer.add_string b
      {|<button class="nojs toggle-all-button" data-action="toggle-all" form="toggle-all-form">Mark all as complete</button><ul class="todo-list">|};
    List.iter
      (fun (t : Store.todo) -> if shows filter t then item b filter ~editing:(editing = Some t.id) t)
      todos;
    Buffer.add_string b {|</ul></section><footer class="footer">|};
    Printf.bprintf b {|<span class="todo-count"><strong>%d</strong> %s left</span><ul class="filters">|}
      left (if left = 1 then "item" else "items");
    List.iter
      (fun (f, label) ->
        Printf.bprintf b {|<li><a%s href="%s">%s</a></li>|}
          (if f = filter then {| class="selected"|} else "") (filter_path f) label)
      [ (All, "All"); (Active, "Active"); (Completed, "Completed") ];
    Buffer.add_string b "</ul>";
    if done_ > 0 then begin
      action_form b ~id:"clear-completed-form" ~action:"/todos/clear-completed" filter;
      Buffer.add_string b
        {|<button class="clear-completed" form="clear-completed-form">Clear completed</button>|}
    end;
    Buffer.add_string b "</footer>"
  end;
  Buffer.add_string b "</section>"

let fragment ~filter todos =
  let b = Buffer.create 4096 in
  todoapp b ~filter todos;
  Buffer.contents b

let page ~version ~filter ?editing todos =
  let b = Buffer.create 8192 in
  Printf.bprintf b
    {|<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TodoMVC</title>
<script>document.documentElement.classList.add("js")</script>
<link rel="stylesheet" href="/static/base.css?v=%s">
<link rel="stylesheet" href="/static/index.css?v=%s">
<link rel="stylesheet" href="/static/app.css?v=%s">
<script type="module" src="/static/app.js?v=%s"></script>
</head>
<body>
|}
    version version version version;
  todoapp b ~filter ?editing todos;
  Buffer.add_string b
    {|
<footer class="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="https://bakeoff.bfj.oncarlos.com">the CARLOS bakeoff</a> · OCaml</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</body>
</html>
|};
  Buffer.contents b