import gleam/option.{None, Some}
import lustre.{type App}
import lustre/attribute as attr
import lustre/component
import lustre/effect.{type Effect}
import lustre/element.{type Element}
import lustre/element/html

import hoverbar

pub const name: String = "viewer-hoverbar"

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

pub type Model {
  Model(
    hoverbar_model: hoverbar.Model,
    root_path: String,
    field_type: String,
    value: String,
  )
}

fn init(_) -> #(Model, Effect(Msg)) {
  let #(hoverbar_model, hoverbar_effect) = hoverbar.init(Nil)
  #(
    Model(
      hoverbar_model: hoverbar.Model(..hoverbar_model, tab_key: "editor"),
      root_path: "",
      field_type: "",
      value: "",
    ),
    hoverbar_effect |> effect.map(HoverbarMsg),
  )
}

pub type Msg {
  HoverbarMsg(hoverbar.Msg)
  ParentChangedRootPath(String)
  ParentChangedFieldType(String)
  ParentChangedValue(String)
}

fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
  case msg {
    HoverbarMsg(hoverbar_msg) -> {
      let #(hoverbar_model, hoverbar_effect) =
        hoverbar.update(model.hoverbar_model, hoverbar_msg)
      #(
        Model(..model, hoverbar_model:),
        hoverbar_effect |> effect.map(HoverbarMsg),
      )
    }
    ParentChangedRootPath(root_path) -> #(
      Model(..model, root_path:),
      effect.none(),
    )
    ParentChangedFieldType(field_type) -> #(
      Model(..model, field_type:),
      effect.none(),
    )
    ParentChangedValue(value) -> #(Model(..model, value:), effect.none())
  }
}

fn view(model: Model) -> Element(Msg) {
  element.fragment([
    html.link([
      attr.rel("stylesheet"),
      attr.href(model.root_path <> "/css_dist/viewer_hoverbar.css"),
    ]),
    hoverbar.view(
      model: model.hoverbar_model,
      map_msg: HoverbarMsg,
      tabs: [
        hoverbar.TabItem(
          icon: model.root_path <> "/heroicons/16/solid/chart-bar.svg",
          label: "Editor",
          key: "editor",
        ),
      ],
      control_bar: fn(tab_key) {
        case tab_key {
          "editor" -> editor_control_bar(model)
          _ -> element.none()
        }
      },
      control_panel: fn(tab_key) {
        case tab_key {
          "editor" -> None
          _ -> None
        }
      },
    ),
  ])
}

fn editor_control_bar(_model: Model) -> Element(Msg) {
  html.input([attr.type_("text"), attr.class("control-bar__input")])
}