Checkbox

<%= render Hakumi::Checkbox::Component.new(id: "basic-checkbox-example", label: "Checkbox") %>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Checkbox::Component.new(label: "Checkbox (Disabled)", disabled: true) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Checkbox::Component.new(label: "Checkbox (Checked & Disabled)", checked: true, disabled: true) %>
  <% end %>
<% end %>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, id: "checkbox-controlled-demo") do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Space::Component.new(align: :center, size: :small) do |controls| %>
      <% controls.with_item do %>
        <%= render Hakumi::Typography::Text::Component.new(content: "Toggle the checkbox:") %>
      <% end %>
      <% controls.with_item do %>
        <%= render Hakumi::Button::Component.new(type: :primary, size: :small, id: "controlled-demo-btn") do %>
          Toggle
        <% end %>
      <% end %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Checkbox::Component.new(
          checked: true,
          label: "Controlled Checkbox",
          id: "controlled-demo-checkbox"
        ) %>
  <% end %>
<% end %>

<script>
  (() => {
    const root = document.getElementById("checkbox-controlled-demo")
    const button = root?.querySelector("#controlled-demo-btn")
    const input = root?.querySelector("#controlled-demo-checkbox")
    if (!root || !button || !input) return

    const wire = () => {
      if (root.dataset.checkboxControlledInitialized === "true") return true

      const wrapper = input.closest(".hakumi-checkbox-wrapper")
      const api = wrapper?.hakumiComponent?.api
      if (!wrapper || !api) return false

      root.dataset.checkboxControlledInitialized = "true"
      button.addEventListener("click", () => {
        api.setChecked(!api.isChecked())
      })
      return true
    }

    if (wire()) return

    const onRegister = () => {
      if (wire()) window.removeEventListener("hakumi-component:registered", onRegister)
    }

    window.addEventListener("hakumi-component:registered", onRegister)
  })()
</script>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, id: "checkbox-group-demo") do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(content: "Groups keep each checkbox in sync with plain helpers.") %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Checkbox::Group::Component.new(
          name: "group1",
          options: ["Apple", "Pear", "Orange"],
          value: ["Apple"]
        ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Checkbox::Group::Component.new(
          name: "group2",
          options: [
            { label: "Apple", value: "Apple" },
            { label: "Pear", value: "Pear" },
            { label: "Orange", value: "Orange", disabled: true }
          ],
          value: ["Pear"]
        ) %>
  <% end %>
<% end %>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, id: "checkbox-check-all-demo") do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::Typography::Text::Component.new(content: "Select fruits with a single toggle:") %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Checkbox::Component.new(
          label: "Check all",
          indeterminate: true,
          id: "checkbox-check-all-toggle"
        ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::Checkbox::Group::Component.new(
          id: "checkbox-check-all-group",
          options: ["Apple", "Pear", "Orange"],
          value: ["Apple", "Orange"]
        ) %>
  <% end %>
<% end %>

<script>
  (() => {
    const group = document.getElementById("checkbox-check-all-group")
    const input = document.getElementById("checkbox-check-all-toggle")
    if (!group || !input) return

    const wrapper = input.closest(".hakumi-checkbox-wrapper")
    if (!wrapper) return

    const wire = () => {
      const groupApi = group.hakumiComponent?.api
      const wrapperApi = wrapper.hakumiComponent?.api
      if (!groupApi || !wrapperApi) return false

      const sync = () => {
        const selected = groupApi.getValue()
        const total = groupApi.getAllValues().length
        wrapperApi.setChecked(selected.length === total)
        wrapperApi.setIndeterminate(selected.length > 0 && selected.length < total)
      }

      input.addEventListener("change", () => {
        input.checked ? groupApi.selectAll() : groupApi.clearAll()
        sync()
      })

      groupApi.onChange(sync)
      sync()
      return true
    }

    if (wire()) return

    const onRegister = () => {
      if (wire()) window.removeEventListener("hakumi-component:registered", onRegister)
    }

    window.addEventListener("hakumi-component:registered", onRegister)
  })()
</script>

<%= render Hakumi::Checkbox::Group::Component.new(style: "width: 100%;") do %>
  <%= render Hakumi::Grid::Row::Component.new do %>
    <%= render Hakumi::Grid::Col::Component.new(span: 8) do %>
      <%= render Hakumi::Checkbox::Component.new(value: "A", label: "A") %>
    <% end %>
    <%= render Hakumi::Grid::Col::Component.new(span: 8) do %>
      <%= render Hakumi::Checkbox::Component.new(value: "B", label: "B") %>
    <% end %>
    <%= render Hakumi::Grid::Col::Component.new(span: 8) do %>
      <%= render Hakumi::Checkbox::Component.new(value: "C", label: "C") %>
    <% end %>
    <%= render Hakumi::Grid::Col::Component.new(span: 8) do %>
      <%= render Hakumi::Checkbox::Component.new(value: "D", label: "D") %>
    <% end %>
    <%= render Hakumi::Grid::Col::Component.new(span: 8) do %>
      <%= render Hakumi::Checkbox::Component.new(value: "E", label: "E") %>
    <% end %>
  <% end %>
<% end %>