open Fmlib_browser
(* Goal *)
type goal = Light | Colour | Durable
(*
  Declared in data.ml:
  type fabric_data = { fabric : string; colour : string; in_stock : bool }
*)
(* Messages *)
type msg =
  | Query of string
  | Light
  | Colour
  | Durable
  | V65
  | V55
  | V45
  | Classic
  | Alpine
  | C65
  | C55
  | C45
  | A65
  | A55
  | A45
let string_of_volume (v : volume) : string =
(* Fabric data structures *)
type fabric_by_goal = {
  light : fabric_data list;
  colour : fabric_data list;
  durable : fabric_data list;
}
let get_fabric_by_goal (g : goal) (f : fabric_by_goal) =
  match g with Light -> f.light | Colour -> f.colour | Durable -> f.durable
(* TO DO: need to filter panel, pocket, rolltop match for in_stock, but at present all fabric in stock*)
let panel_match (p : pack) : fabric_by_goal =
  match p with
  | C65 ->
      { light = vx21; colour = List.concat [ epx200; epx400 ]; durable = ultra }
  | C55 ->
      { light = vx21; colour = List.concat [ epx200; epx400 ]; durable = ultra }
  | C45 ->
      { light = List.concat [ vx07; vx21 ]; colour = epx200; durable = ultra }
let pocket_match (p : pack) : fabric_by_goal =
  match p with
  | C65 ->
      {
        light = List.concat [ vx07; gridstop ];
        colour = epx200;
        durable = List.concat [ vx07; epx200 ];
      }
  | C55 ->
      {
        light = List.concat [ vx07; gridstop ];
        colour = epx200;
        durable = List.concat [ vx07; epx200 ];
      }
  | C45 ->
      {
        light = List.concat [ liteskin; vx07; gridstop ];
        colour = List.concat [ epx200; gridstop ];
        durable = List.concat [ vx07; epx200 ];
      }
  | A65 ->
      {
        light = List.concat [ vx21; vx42 ];
        colour = List.concat [ epx400; epx200 ];
        durable = ultra;
      }
  | A55 ->
      {
        light = List.concat [ vx21; vx42 ];
        colour = List.concat [ epx400; epx200 ];
        durable = ultra;
      }
  | A45 ->
      {
        light = List.concat [ vx21; vx42 ];
        durable = ultra;
      }
let rolltop_match (p : pack) =
  match p with
  | C65 ->
      { light = vx07; colour = epx200; durable = List.concat [ vx07; epx200 ] }
  | C55 ->
      { light = vx07; colour = epx200; durable = List.concat [ vx07; epx200 ] }
      {
        light = List.concat [ liteskin; vx07 ];
        colour = epx200;
        durable = List.concat [ vx07; epx200 ];
      }
  | A65 ->
      { light = vx07; colour = epx200; durable = List.concat [ vx07; epx200 ] }
  | A55 ->
      { light = vx07; colour = epx200; durable = List.concat [ vx07; epx200 ] }
  | A45 ->
(* Model *)
type state = {
  query : string;
  volume : volume;
  pack : pack;
  goal : goal;
  side_panels : fabric_data;
  side_pockets : fabric_data;
  back_panel : fabric_data;
  rolltop : fabric_data;
}
let init : state =
  {
    query = "";
    volume = V55;
    pack = C55;
    goal = Colour;
  }
(* construct formspree request *)
let formspree_request (s : state) : (resp, Task.http_error) Task.t =
  let body (s : state) : string =
    Printf.sprintf
      {|{"select_a_pack":"%s", "i_am_going_for":"%s", "back_panel":"%s", "rolltop":"%s", "side_panels":"%s", "side_pockets":"%s", "torso":"%s", "waist":"%s","name":"%s", "_replyto":"%s", "postal_address":"%s", "message":"%s", "shipping":"%s"}|}
      (string_of_pack s.pack) (string_of_goal s.goal) s.back_panel.fabric
      s.rolltop.fabric s.side_panels.fabric s.side_pockets.fabric
      (string_of_torso s.torso) (string_of_waist s.waist) s.name s.email
      (String.escaped s.address) (String.escaped s.message)
      (string_of_shipping s.shipping)
  in
  post
    {
      url = "https://formspree.io/f/mjvnykql";
      headers = [ ("Accept", "application/json") ];
      body = body s;
    }
    resp_decoder
let string_of_state s =
  s.query ^ " | " ^ string_of_volume s.volume ^ " | " ^ string_of_style s.style
  ^ " | " ^ string_of_pack s.pack ^ " | " ^ string_of_goal s.goal ^ " | "
  ^ s.side_panels.fabric ^ " | " ^ s.side_pockets.fabric ^ " | "
  ^ string_of_torso s.torso ^ " | " ^ string_of_waist s.waist ^ " | "
  ^ string_of_shipping s.shipping
  ^ " | " ^ s.name ^ " | " ^ s.email ^ " | " ^ s.address ^ " | " ^ " | "
  ^ s.message
  ^ s.back_panel.fabric ^ " | " ^ s.rolltop.fabric ^ " | "
let price s =
  let p = record_of_pack s.pack in
  match s.goal with
  | Durable -> p.price + p.ultra_price + int_of_shipping s.shipping
  | Light -> p.price + int_of_shipping s.shipping
  | Colour -> p.price + int_of_shipping s.shipping
    (* golden dazy *)
    (* brick red *)
    (* tropic teal *)
    (* bright blue *)
    torso = T50;
    waist = W_Large;
    buy_now = Not_sold;
    dropdown_side_pan = false;
    dropdown_side_poc = false;
    dropdown_back_pan = false;
    dropdown_rolltop = false;
    shipping = S_island;
    email = "";
    address = "";
    message = "";
    name = "";
    rolltop = List.nth epx200 8;
    back_panel = List.nth epx200 7;
    side_pockets = List.nth epx200 2;
    side_panels = List.nth epx200 4;
    style = Classic;
  torso : torso;
  waist : waist;
  buy_now : buy_now;
  dropdown_side_pan : bool;
  dropdown_side_poc : bool;
  dropdown_back_pan : bool;
  dropdown_rolltop : bool;
  shipping : shipping;
  email : string;
  address : string;
  message : string;
  name : string;
  style : style;
type buy_now = Not_sold | Posting_buy_now | Failed_to_post | Sold of resp
      { light = vx07; colour = epx200; durable = List.concat [ vx07; epx200 ] }
  | C45 ->
        colour = List.concat [ epx200; epx400 ];
  | A55 ->
      { light = vx21; colour = List.concat [ epx200; epx400 ]; durable = ultra }
  | A45 ->
      { light = vx21; colour = List.concat [ epx200; epx400 ]; durable = ultra }
  | A65 ->
      { light = vx21; colour = List.concat [ epx200; epx400 ]; durable = ultra }
  match v with V65 -> "65l" | V55 -> "55l" | V45 -> "45l"
let string_of_style (s : style) : string =
  match s with Classic -> "Classic" | Alpine -> "Alpine"
(* Views*)
let test_view state =
  let open Html in
  let open Attribute in
    [
      ul []
        [
          li [] [ text "Query: "; text state.query ];
          li [] [ text "Pack: "; text (string_of_pack state.pack) ];
          li [] [ text "Goal: "; text (string_of_goal state.goal) ];
          li [] [ text "Side Panels: "; text state.side_panels.fabric ];
          li [] [ text "Side Pockets: "; text state.side_pockets.fabric ];
          li [] [ text "Back Panel: "; text state.back_panel.fabric ];
          li [] [ text "Rolltop: "; text state.rolltop.fabric ];
          li [] [ text "Torso Length: "; text (string_of_torso state.torso) ];
          li [] [ text "Waist Belt: "; text (string_of_waist state.waist) ];
          li [] [ text "Email: "; text state.email ];
          li [] [ text "Address: "; text state.address ];
          li [] [ text "Message: "; text state.message ];
          li [] [ text "Shipping: "; text (string_of_shipping state.shipping) ];
          li [] [ text "Name: "; text state.name ];
        ];
    ]
let header_view =
  let open Html in
  let open Attribute in
  let nav attrs nodes = node "nav" attrs nodes in
  let img attrs nodes = node "img" attrs nodes in
  let a attrs nodes = node "a" attrs nodes in
  nav []
    [
      ul []
        [
          li [] [ a [ href "https://skraak.kiwi" ] [ text "Kiwi" ] ];
          li [] [ a [ href "/contact" ] [ text "Contact" ] ];
        ];
    ]
  let open Html in
  let open Attribute in
  button
  let open Html in
  let open Attribute in
  let section attrs nodes = node "section" attrs nodes in
    [
      div
        [ attribute "role" "group" ]
        [
        ];
    ]
  match p with
  | A45 -> a45_view
  | A55 -> a55_view
  | A65 -> a65_view
  | C45 -> c45_view
  | C55 -> c55_view
  | C65 -> c65_view
  let open Html in
  let open Attribute in
  let article attrs nodes = node "article" attrs nodes in
  let footer attrs nodes = node "footer" attrs nodes in
    [
    ]
  let open Html in
  let open Attribute in
  let section attrs nodes = node "section" attrs nodes in
  let details attrs nodes = node "details" attrs nodes in
  let summary attrs nodes = node "summary" attrs nodes in
  let hr attrs nodes = node "hr" attrs nodes in
  let packs = list_of_volume state.volume in
  let card = pack_card state in
  section
    [ id "packs" ]
    [
      hr [] [];
      details []
        [
          ul []
        ];
        [ class_ "grid" ]
        [
        ];
    ]
let view state =
  let open Html in
  let open Attribute in
(* Update *)
let subscriptions _state = Subscription.none
let _ = basic_application init Command.none view subscriptions update
let update state msg =
          state with
          goal = Light;
          side_panels = check_side_panels state Light state.pack;
          side_pockets = check_pockets state Light state.pack;
          back_panel = check_back_panel state Light state.pack;
          rolltop = check_rolltop state Light state.pack;
          state with
          goal = Colour;
          side_panels = check_side_panels state Colour state.pack;
          side_pockets = check_pockets state Colour state.pack;
          back_panel = check_back_panel state Colour state.pack;
          rolltop = check_rolltop state Colour state.pack;
          state with
          goal = Durable;
          side_panels = check_side_panels state Durable state.pack;
          side_pockets = check_pockets state Durable state.pack;
          back_panel = check_back_panel state Durable state.pack;
          rolltop = check_rolltop state Durable state.pack;
          state with
          volume = V65;
          pack = (pack_of_vol_styl (V65, state.style)).pack;
          state with
          volume = V55;
          pack = (pack_of_vol_styl (V55, state.style)).pack;
          state with
          volume = V45;
          pack = (pack_of_vol_styl (V45, state.style)).pack;
          state with
          style = Classic;
          side_panels = check_side_panels state state.goal state.pack;
          side_pockets = check_pockets state state.goal state.pack;
          back_panel = check_back_panel state state.goal state.pack;
          rolltop = check_rolltop state state.goal state.pack;
          state with
          style = Alpine;
          side_panels = check_side_panels state state.goal state.pack;
          side_pockets = check_pockets state state.goal state.pack;
          back_panel = check_back_panel state state.goal state.pack;
          rolltop = check_rolltop state state.goal state.pack;
          state with
          pack = C65;
          style = Classic;
          side_panels = check_side_panels state state.goal C65;
          side_pockets = check_pockets state state.goal C65;
          back_panel = check_back_panel state state.goal C65;
          rolltop = check_rolltop state state.goal C65;
          state with
          pack = C55;
          style = Classic;
          side_panels = check_side_panels state state.goal C55;
          side_pockets = check_pockets state state.goal C55;
          back_panel = check_back_panel state state.goal C55;
          rolltop = check_rolltop state state.goal C55;
          state with
          pack = C45;
          style = Classic;
          side_panels = check_side_panels state state.goal C45;
          side_pockets = check_pockets state state.goal C45;
          back_panel = check_back_panel state state.goal C45;
          rolltop = check_rolltop state state.goal C45;
          state with
          pack = A65;
          style = Alpine;
          side_panels = check_side_panels state state.goal A65;
          side_pockets = check_pockets state state.goal A65;
          back_panel = check_back_panel state state.goal A65;
          rolltop = check_rolltop state state.goal A65;
          state with
          pack = A55;
          style = Alpine;
          side_panels = check_side_panels state state.goal A55;
          side_pockets = check_pockets state state.goal A55;
          back_panel = check_back_panel state state.goal A55;
          rolltop = check_rolltop state state.goal A55;
          state with
          pack = A45;
          style = Alpine;
          side_panels = check_side_panels state state.goal A45;
          side_pockets = check_pockets state state.goal A45;
          back_panel = check_back_panel state state.goal A45;
          rolltop = check_rolltop state state.goal A45;
        },
        Command.none )
  | Side_panels (f : fabric_data) ->
      ({ state with side_panels = f }, Command.none)
  | Side_pockets (f : fabric_data) ->
      ({ state with side_pockets = f }, Command.none)
  | Back_panel (f : fabric_data) -> ({ state with back_panel = f }, Command.none)
  | Rolltop (f : fabric_data) -> ({ state with rolltop = f }, Command.none)
  | T56 -> ({ state with torso = T56 }, Command.none)
  | T53 -> ({ state with torso = T53 }, Command.none)
  | T50 -> ({ state with torso = T50 }, Command.none)
  | T48 -> ({ state with torso = T48 }, Command.none)
  | T45 -> ({ state with torso = T45 }, Command.none)
  | T43 -> ({ state with torso = T43 }, Command.none)
  | W_Med -> ({ state with waist = W_Med }, Command.none)
  | W_Large -> ({ state with waist = W_Large }, Command.none)
  | N_island -> ({ state with shipping = N_island }, Command.none)
  | S_island -> ({ state with shipping = S_island }, Command.none)
  | Collect -> ({ state with shipping = Collect }, Command.none)
  | Name str -> ({ state with name = str }, Command.none)
  | Email str -> ({ state with email = str }, Command.none)
  | Address str -> ({ state with address = str }, Command.none)
  | Message str -> ({ state with message = str }, Command.none)
  | Clicked_buy_now ->
      ({ state with buy_now = Posting_buy_now }, send_data state)
  | Got_response result -> (
      match result with
      | Error _ -> ({ state with buy_now = Failed_to_post }, Command.none)
      | Ok resp -> ({ state with buy_now = Sold resp }, Command.none))
  | Toggle_side_panels ->
      ( { state with dropdown_side_pan = not state.dropdown_side_pan },
        Command.none )
  | Toggle_side_pockets ->
      ( { state with dropdown_side_poc = not state.dropdown_side_poc },
        Command.none )
  | Toggle_back_panel ->
      ( { state with dropdown_back_pan = not state.dropdown_back_pan },
        Command.none )
  | Toggle_rolltop ->
      ( { state with dropdown_rolltop = not state.dropdown_rolltop },
        Command.none )
        },
        Command.none )
  | A45 ->
      ( {
        },
        Command.none )
  | A55 ->
      ( {
        },
        Command.none )
  | A65 ->
      ( {
        },
        Command.none )
  | C45 ->
      ( {
        },
        Command.none )
  | C55 ->
      ( {
        },
        Command.none )
  | C65 ->
      ( {
        },
        Command.none )
  (* never called *)
  | Alpine ->
      ( {
        },
        Command.none )
  (* never called *)
  | Classic ->
      ( {
        },
        Command.none )
  | V45 ->
      ( {
        },
        Command.none )
  | V55 ->
      ( {
        },
        Command.none )
  | V65 ->
      ( {
        },
        Command.none )
  | Durable ->
      ( {
        },
        Command.none )
  | Colour ->
      ( {
  match msg with
  | Query str -> ({ state with query = str }, Command.none)
  | Light ->
      ( {
(* Helper for Update *)
let pack_of_vol_styl (vs_tup : volume * style) : pack_data =
  match vs_tup with
  | V65, Classic -> record_of_pack C65
  | V55, Classic -> record_of_pack C55
  | V45, Classic -> record_of_pack C45
  | V65, Alpine -> record_of_pack A65
  | V55, Alpine -> record_of_pack A55
  | V45, Alpine -> record_of_pack A45
(* Checks that the state of side_panels, side_pockets, back_panel, rolltop, is
   possible in the fabric_data list and returns plausible values.
   Run for any change in goal or pack *)
(* Send form data*)
let send_data s =
  formspree_request s
  |> Command.attempt (function
       | Error err -> Got_response (Error err)
       | Ok resp -> Got_response (Ok resp))
let check_rolltop state (g : goal) (p : pack) =
  let r = rolltop_match p |> get_fabric_by_goal g in
  if List.memq state.rolltop r then state.rolltop else List.hd r
let check_pockets state (g : goal) (p : pack) =
  let pan = pocket_match p |> get_fabric_by_goal g in
  if List.memq state.side_pockets pan then state.side_pockets else List.hd pan
let check_side_panels state (g : goal) (p : pack) =
  let pan = panel_match p |> get_fabric_by_goal g in
  if List.memq state.side_panels pan then state.side_panels else List.hd pan
let check_back_panel state (g : goal) (p : pack) =
  let pan = panel_match p |> get_fabric_by_goal g in
  if List.memq state.back_panel pan then state.back_panel else List.hd pan
  ( div []
      [
        div [ id "header"; class_ "container" ] [ header_view ];
        div
          [ id "main"; class_ "container" ]
          [
            h1 [] [ text "Comfortable Kiwi made backpacks" ];
            (*query_view state;*)
            div [ padding "1rem" ] [];
            goal_buttons state.goal "Your main priority";
            div [ padding "1rem" ] [];
            volume_buttons state.volume "Your pack volume";
            div [ padding "1rem" ] [];
            pack_view state "Choose your pack";
            div [ padding "1rem" ] [];
            fabric_view state "Fabric and colour";
            div [ padding "1rem" ] [];
            torso_view state "Torso length (cm)";
            div [ padding "1rem" ] [];
            waist_view state "Waist belt (cm)";
            div [ padding "1rem" ] [];
            txt_details state "Your details";
            div [ padding "1rem" ] [];
            shipping_buttons state.shipping "Shipping";
            div [ padding "1rem" ] [];
            buy_now state;
            div [ padding "1rem" ] [];
            (* stock_view state;
            test_view state;
          ];
      ],
    "Fiordland Packs" )
            div [ padding "1rem" ] [];*)
                  div [ padding "1rem" ] [];
let waist_view s hd =
  let open Html in
  let open Attribute in
  let section attrs nodes = node "section" attrs nodes in
  let details attrs nodes = node "details" attrs nodes in
  let summary attrs nodes = node "summary" attrs nodes in
  let hr attrs nodes = node "hr" attrs nodes in
  let img attrs nodes = node "img" attrs nodes in
  section []
    [
      h2 [] [ text hd ];
      div
        [ attribute "role" "group" ]
        [
          react_button string_of_waist W_Med s.waist W_Med;
          react_button string_of_waist W_Large s.waist W_Large;
        ];
      hr [] [];
      details []
        [
        ];
      hr [] [];
    ]
  let open Html in
  let open Attribute in
  let section attrs nodes = node "section" attrs nodes in
  section []
    [
    ]
      p [] [ text "Lead time on your pack is "; text wait_time ];
      p []
        [
        ];
      (match s.buy_now with
      | Not_sold ->
          button
            [
              class_ "contrast";
              padding "1rem";
              on_click (Clicked_buy_now : msg);
            ]
            [ text "Buy Now" ]
      | Posting_buy_now -> div [] [ text "Sending..." ]
      | Failed_to_post ->
          p []
            [
              text "Sorry, we couldn't send your order, please email me: ";
              text email_address;
            ]
      | Sold resp ->
          if resp.ok == true then
            p [] [ text "Thanks for your order! I will be in contact soon" ]
          else
            div []
              [
                p []
                  [
                    text
                      "Sorry, something is invalid, check your email address \
                       and try again. If all else fails, please email me: ";
                    text email_address;
                  ];
                button
                  [
                    class_ "contrast";
                    padding "1rem";
                    on_click (Clicked_buy_now : msg);
                  ]
                  [ text "Buy Now" ];
              ]);
          text "Price: $"; text (string_of_int (price s)); text " incl. a bottle pocket, shipping and GST";
      h2 [] [ text hd ];
      label []
        [
          text "Name";
          input
            [ attribute "type" "name"; id "name"; value s.name; on_input name ]
            [];
        ];
      label []
        [
          text "Email";
          input
            [
              attribute "type" "email";
              attribute "autocomplete" "email";
              id "email";
              value s.email;
              on_input email;
            ]
            [];
        ];
    ]
let buy_now s =
  let open Html in
  let open Attribute in
  let section attrs nodes = node "section" attrs nodes in
  section []
    [
        ];
      label []
        [
          text "Postal Address";
          textarea
            [
              attribute "type" "address";
              id "address";
              value s.address;
              on_input address;
            ]
            [];
        ];
      label []
        [
          text "Message";
          textarea
            [
              attribute "type" "text";
              attribute "name" "message";
              id "message";
              value s.message;
              on_input message;
            ]
            [];
  let name str = Name str in
  let email str = Email str in
  let address str = Address str in
  let message str = Message str in
let shipping_buttons s hd =
  let open Html in
  let open Attribute in
  let section attrs nodes = node "section" attrs nodes in
  section []
    [
      h2 [] [ text hd ];
      div
        [ attribute "role" "group" ]
        [
          react_button string_of_shipping N_island s N_island;
          react_button string_of_shipping S_island s S_island;
          react_button string_of_shipping Collect s Collect;
        ];
    ]
let txt_details s hd =
          summary [] [ text "How to measure your waist" ];
            [
            ];
              img [ src "waist.svg" ] [];
              div []
                [
                  p []
                    [
                      text
                        "A large waist belt is 81 cm tip to tip. A medium \
                         waist belt is 75 cm tip to tip.";
                    ];
                  p []
                    [
                      text
                        "Your waist belt, tip to tip, should be 80 to 90 \
                         percent of your waist circumference. Generally, \
                         either size will be fine for most average people, I \
                         use both sizes myself.";
                    ];
                ];
          div
            [ class_ "grid" ]
      hr [] [];
          picker s "Side pockets" pocket_match side_pockets
        ];
    ]
let torso_view s hd =
  let open Html in
  let open Attribute in
  let section attrs nodes = node "section" attrs nodes in
  let details attrs nodes = node "details" attrs nodes in
  let summary attrs nodes = node "summary" attrs nodes in
  let hr attrs nodes = node "hr" attrs nodes in
  let img attrs nodes = node "img" attrs nodes in
  section []
    [
      h2 [] [ text hd ];
      div
        [ attribute "role" "group" ]
        [
          react_button string_of_torso T43 s.torso T43;
          react_button string_of_torso T45 s.torso T45;
          react_button string_of_torso T48 s.torso T48;
          react_button string_of_torso T50 s.torso T50;
          react_button string_of_torso T53 s.torso T53;
          react_button string_of_torso T56 s.torso T56;
        ];
      hr [] [];
      details []
        [
          summary [] [ text "How to measure your torso" ];
            [
            ];
              img [ src "torso.svg" ] [];
              div []
                [
                  p []
                    [
                      text
                        "Bowing your head forward, find the bump sticking out \
                         on your spine at the bottom of your neck, the C7 \
                         vertebra.";
                    ];
                  p []
                    [
                      text
                        "Find the top of your sacrum by placing your fore \
                         fingers on your hip bones, thumbs pointing in and \
                         resting in the small of your back.";
                    ];
                  p []
                    [
                      text
                        "Use a tape measure or piece of string to measure the \
                         length of your spine in between, conforming to the \
                         curves of your back.";
                    ];
                  p []
                    [
                      text
                        "Measure a few times at different times, compare your \
                         final result with the length of a known good pack.";
                    ];
                ];
                  p []
                    [
                      text
                        "For an exact custom torso length you can leave a note in the message field below.";
                    ]
          div
            [ class_ "grid" ]
            s.side_pockets.colour s.dropdown_side_poc Toggle_side_pockets;
          picker s "Back panel" panel_match back_panel s.back_panel.colour
            s.dropdown_back_pan Toggle_back_panel;
          picker s "Rolltop" rolltop_match rolltop s.rolltop.colour
            s.dropdown_rolltop Toggle_rolltop;
          picker s "Side panels" panel_match side_panels s.side_panels.colour
            s.dropdown_side_pan Toggle_side_panels;
      hr [] [];
    ]
(* fbfcfc *)
  let open Html in
  let open Attribute in
  let details attrs nodes = node "details" attrs nodes in
  let summary attrs nodes = node "summary" attrs nodes in
  details
    [
      ul []
        (List.map
           (* can filter for in stock *)
           (s.pack |> match_fun |> get_fabric_by_goal s.goal));
    ]
let fabric_view s hd =
  let open Html in
  let open Attribute in
  let section attrs nodes = node "section" attrs nodes in
  let back_panel (f : fabric_data) = Back_panel f in
  let side_panels (f : fabric_data) = Side_panels f in
  let side_pockets (f : fabric_data) = Side_pockets f in
  let rolltop (f : fabric_data) = Rolltop f in
  section []
    [
      h2 [] [ text hd ];
      section
           (fun (x : fabric_data) ->
             li
               [
                 on_click (update_fun x);
                 on_click toggle_msg;
                 color "black";
                 background_color x.colour;
               ]
               [ text x.fabric ])
      summary
        [ background_color bg_colour; color "black"; on_click toggle_msg ]
        [ text hd ];
    [
      class_ "dropdown";
      (if state_field = true then attribute "open" "" else attribute "closed" "");
    ]
let picker s hd match_fun update_fun bg_colour state_field toggle_msg =
            (List.map (fun x -> li [] [ text x ]) (ft_lst_of_pack state.pack));
          summary [] [ text "Features: "; text (string_of_pack state.pack) ];
      h2 [] [ text hd ];
      div [ padding "1rem" ] [];
      card state.pack;
      div
        [ attribute "role" "group" ]
        (List.map
           (fun (p : pack_data) ->
             react_button string_of_pack p.pack state.pack p.message)
           packs);
let pack_view state hd =
      article []
        [
          view_of_pack pack state.back_panel.colour state.rolltop.colour
            state.side_panels.colour state.side_pockets.colour;
          footer [] [ text (string_of_pack pack) ];
        ];
  div []
let pack_card (state : state) (pack : pack) =
let view_of_pack (p : pack) =
          react_button string_of_volume V65 s V65;
          react_button string_of_volume V55 s V55;
          react_button string_of_volume V45 s V45;
      h2 [] [ text hd ];
  section []
let volume_buttons s hd =
    [ (if s = btn_type then class_ "contrast" else on_click btn_msg) ]
    [ text (f btn_type) ]
let goal_buttons s hd =
  let open Html in
  let open Attribute in
  let section attrs nodes = node "section" attrs nodes in
  section []
    [
      h2 [] [ text hd ];
      div
        [ attribute "role" "group" ]
        [
          react_button string_of_goal Light s Light;
          react_button string_of_goal Colour s Colour;
          react_button string_of_goal Durable s Durable;
        ];
    ]
let query_view state =
  let open Html in
  let open Attribute in
  let form attrs nodes = node "form" attrs nodes in
  let query str = Query str in
  form []
    [
      input
        [
          attribute "type" "search";
          attribute "id" "search";
          attribute "name" "search";
          attribute "placeholder" "Ask a question";
          value state.query;
          on_input query;
        ]
        [];
    ]
let react_button f btn_type s btn_msg =
          (*li [] [ a [ href "https://fiordlandpacks.fly.dev" ] [ text "Blog" ] ];*)
      ul [] [ li [] [ img [ src "logo.svg"; style "width" "20rem" ] [] ] ];
          li [] [ text "Volume: "; text (string_of_volume state.volume) ];
          li [] [ text "Style: "; text (string_of_style state.style) ];
  let section attrs nodes = node "section" attrs nodes in
  section []
  | Side_panels of fabric_data
  | Side_pockets of fabric_data
  | Back_panel of fabric_data
  | Rolltop of fabric_data
(* Pack data structures *)
type pack_data = {
  pack : pack;
  message : msg;
  volume : volume;
  str : string;
  price : int;
  ultra_price : int;
  featues : string list;
}
let record_of_pack (p : pack) : pack_data =
  match p with
  | C65 ->
      {
        pack = C65;
        message = C65;
        volume = V65;
        str = "65l Classic";
      }
  | C55 ->
      {
        pack = C55;
        message = C55;
        volume = V55;
        str = "55l Classic";
      }
  | C45 ->
      {
        pack = C45;
        message = C45;
        volume = V45;
        str = "45l Classic";
      }
  | A65 ->
      {
        pack = A65;
        message = A65;
        volume = V65;
        str = "65l Alpine";
      }
  | A55 ->
      {
        pack = A55;
        message = A55;
        volume = V55;
        str = "55l Alpine";
      }
  | A45 ->
      {
        pack = A45;
        message = A45;
        volume = V45;
        str = "45l Alpine";
      }
let list_of_volume (v : volume) : pack_data list =
  match v with
let string_of_pack p = match record_of_pack p with { str } -> str
let ft_lst_of_pack p = match record_of_pack p with { featues } -> featues
  | V65 -> [ record_of_pack A65; record_of_pack C65 ]
  | V55 -> [ record_of_pack A55; record_of_pack C55 ]
  | V45 -> [ record_of_pack A45; record_of_pack C45 ]
        price = a45_price;
        ultra_price = v45_ultra_price;
        featues = a45_featues;
        style = Alpine;
        price = a55_price;
        ultra_price = v55_ultra_price;
        featues = a55_featues;
        style = Alpine;
        price = a65_price;
        ultra_price = v65_ultra_price;
        featues = a65_featues;
        style = Alpine;
        price = c45_price;
        ultra_price = v45_ultra_price;
        featues = c45_featues;
        style = Classic;
        price = c55_price;
        ultra_price = v55_ultra_price;
        featues = c65_featues;
        style = Classic;
        price = c65_price;
        ultra_price = v65_ultra_price;
        featues = c65_featues;
        style = Classic;
  style : style;
  | T56
  | T53
  | T50
  | T48
  | T45
  | T43
  | W_Med
  | W_Large
  | N_island
  | S_island
  | Collect
  | Email of string
  | Address of string
  | Message of string
  | Clicked_buy_now
  | Got_response of (resp, Task.http_error) result
  | Toggle_side_panels
  | Toggle_side_pockets
  | Toggle_back_panel
  | Toggle_rolltop
  | Name of string
(* Pack and volume*)
type pack = C65 | C55 | C45 | A65 | A55 | A45
type volume = V65 | V55 | V45
type style = Classic | Alpine
(* Torso length *)
type torso = T56 | T53 | T50 | T48 | T45 | T43
let string_of_torso (t : torso) : string =
  match t with
  | T56 -> "56 XL"
  | T53 -> "53 L"
  | T50 -> "50 L"
  | T48 -> "48 M"
  | T45 -> "45 M"
  | T43 -> "43 S"
(* Waist belt size *)
type waist = W_Med | W_Large
let string_of_waist (w : waist) : string =
  match w with W_Med -> "75 M" | W_Large -> "80 L"
type shipping = N_island | S_island | Collect
let int_of_shipping (sh : shipping) : int =
  match sh with
  | N_island -> ni_shipping
  | S_island -> si_shipping
  | Collect -> collect
let string_of_shipping (sh : shipping) : string =
  match sh with
  | N_island -> "$" ^ string_of_int ni_shipping ^ " North Is."
  | S_island -> "$" ^ string_of_int si_shipping ^ " South Is."
  | Collect -> "Collect"
(* Formspree stuff *)
type resp = { ok : bool }
let resp_decoder =
  Decoder.(
    let* ok = Decoder.field "ok" Decoder.bool in
    return { ok })
type http_params = {
  url : string;
  headers : (string * string) list;
  body : string;
}
let post { url; headers; body } = Task.http_json "POST" url headers body
(* Need this type to transfer properly between pack volumes while maintaining style, colour info *)
let string_of_goal (g : goal) : string =
  match g with
  | Light -> "Less Weight"
  | Colour -> "More Colour"
  | Durable -> "More Durable"
open Svg
open Data
(* file: working.ml *)