import gleam/dynamic.{type Dynamic}
import lustre.{type App}
import lustre/component
import lustre/effect.{type Effect}
import lustre/element.{type Element}
import lustre/element/html

import context

pub const name: String = "viewer-controller"

pub fn component() -> App(Nil, Model, Msg) {
  lustre.component(init, update, view, [
    component.on_attribute_change("root-path", fn(value) {
      ParentChangedRootPath(value) |> Ok
    }),
  ])
}

pub type Model {
  Model(root_path: String, root_path_consumers: List(Dynamic))
}

fn init(_) -> #(Model, Effect(Msg)) {
  #(Model(root_path: "", root_path_consumers: []), effect.none())
}

pub type Msg {
  ParentChangedRootPath(String)
  ChildRequestedRootPath(Dynamic, Bool)
}

fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
  case msg {
    ParentChangedRootPath(root_path) -> #(
      Model(..model, root_path:),
      context.update_consumers(
        model.root_path_consumers,
        dynamic.string(root_path),
      ),
    )
    ChildRequestedRootPath(callback, subscribe) -> #(
      case subscribe {
        True ->
          Model(..model, root_path_consumers: [
            callback,
            ..model.root_path_consumers
          ])
        False -> model
      },
      context.update_consumers([callback], dynamic.string(model.root_path)),
    )
  }
}

fn view(_: Model) -> Element(Msg) {
  html.div(
    [
      context.on_context_request(
        dynamic.string("root_path"),
        ChildRequestedRootPath,
      ),
    ],
    [component.default_slot([], [])],
  )
}