Calendar

<%= render Hakumi::Calendar::Component.new %>

<%
  events = {
    Date.today => [
      { id: 1, type: :warning, content: "This is warning event." },
      { id: 2, type: :success, content: "This is usual event." }
    ],
    Date.today + 5 => [
      { id: 3, type: :warning, content: "This is warning event." },
      { id: 4, type: :success, content: "This is usual event." },
      { id: 5, type: :error, content: "This is error event." }
    ],
    Date.today + 10 => [
      { id: 6, type: :warning, content: "This is warning event." },
      { id: 7, type: :success, content: "This is very long usual event......" }
    ],
    Date.today + 15 => [
      { id: 8, type: :error, content: "This is error event 1." },
      { id: 9, type: :error, content: "This is error event 2." },
      { id: 10, type: :error, content: "This is error event 3." },
      { id: 11, type: :error, content: "This is error event 4." }
    ]
  }
%>

<%= render Hakumi::Calendar::Component.new(events: events, id: "notice-calendar") %>

<script>
  (() => {
    const calendarEl = document.getElementById("notice-calendar")
    if (!calendarEl) return

    let wired = false
    const wire = () => {
      if (wired) return true
      
      const api = calendarEl.hakumiComponent?.api
      if (!api) return false

      calendarEl.addEventListener("hakumi--calendar:select", (e) => {
        const date = e.detail.date
        const dateStr = date.toISOString().split("T")[0]
        const events = api.getEventsForDate(dateStr)
        
        console.log("📅 Selected date:", dateStr)
        console.log("📋 Events for this date:", events)
        
        if (events.length > 0) {
          console.table(events)
        }
      })

      console.log("🗓️ Calendar wired! All events:", api.getEvents())

      wired = true
      return true
    }

    if (wire()) return
    const interval = setInterval(() => { if (wire()) clearInterval(interval) }, 50)
    setTimeout(() => clearInterval(interval), 5000)
  })()
</script>

<%= render Hakumi::Calendar::Component.new(fullscreen: false) %>

<%= render Hakumi::Calendar::Component.new(
  value: Date.today,
  id: "selectable-calendar"
) %>

<div style="margin-top: 16px;">
  <%= render Hakumi::Alert::Component.new(
    type: :info,
    message: "Selected date will be shown here",
    id: "selected-date-alert"
  ) %>
</div>

<script>
  (() => {
    const calendarEl = document.getElementById("selectable-calendar")
    const alertEl = document.getElementById("selected-date-alert")
    if (!calendarEl || !alertEl) return

    let wired = false
    const wire = () => {
      if (wired) return true
      
      const calendarApi = calendarEl.hakumiComponent?.api
      const alertApi = alertEl.hakumiComponent?.api
      if (!calendarApi || !alertApi) return false

      calendarEl.addEventListener("hakumi--calendar:select", (e) => {
        const date = e.detail.date
        const formatted = date.toLocaleDateString("en-US", {
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric"
        })
        alertApi.setMessage(`You selected: ${formatted}`)
      })

      wired = true
      return true
    }

    if (wire()) return
    const interval = setInterval(() => { if (wire()) clearInterval(interval) }, 50)
    setTimeout(() => clearInterval(interval), 5000)
  })()
</script>

<%= render Hakumi::Calendar::Component.new(show_week: true) %>

<%= render Hakumi::Calendar::Component.new(
  fullscreen: false,
  id: "custom-header-calendar"
) do |calendar|
  calendar.with_header_content do %>
    <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
      <div style="display: flex; align-items: center; gap: 8px;">
        <%= render Hakumi::Button::Component.new(
          type: :text,
          size: :small,
          id: "cal-prev-year",
          icon: :double_left
        ) %>
        <%= render Hakumi::Button::Component.new(
          type: :text,
          size: :small,
          id: "cal-prev-month",
          icon: :left
        ) %>
      </div>

      <div id="cal-header-title" style="font-weight: 500;">
        Custom Header
      </div>

      <div style="display: flex; align-items: center; gap: 8px;">
        <%= render Hakumi::Button::Component.new(
          type: :text,
          size: :small,
          id: "cal-next-month",
          icon: :right
        ) %>
        <%= render Hakumi::Button::Component.new(
          type: :text,
          size: :small,
          id: "cal-next-year",
          icon: :double_right
        ) %>
      </div>
    </div>
  <% end %>
<% end %>

<script>
  (() => {
    const calendarEl = document.getElementById("custom-header-calendar")
    if (!calendarEl) return

    let wired = false
    const wire = () => {
      if (wired) return true
      
      const api = calendarEl.hakumiComponent?.api
      if (!api) return false

      const getTitleEl = () => document.getElementById("cal-header-title")

      const updateTitle = () => {
        const date = api.getValue()
        const monthNames = ["January", "February", "March", "April", "May", "June",
                           "July", "August", "September", "October", "November", "December"]
        const title = getTitleEl()
        if (title) {
          title.textContent = `${monthNames[date.getMonth()]} ${date.getFullYear()}`
        }
      }

      let detachControls = () => {}
      const attachControls = () => {
        detachControls()

        const removers = []
        const bindControl = (id, handler) => {
          const el = document.getElementById(id)
          if (!el) return
          const wrapped = (event) => {
            event.preventDefault()
            handler()
          }
          el.addEventListener("click", wrapped)
          removers.push(() => el.removeEventListener("click", wrapped))
        }

        bindControl("cal-prev-year", () => api.prevYear())
        bindControl("cal-prev-month", () => api.prevMonth())
        bindControl("cal-next-month", () => api.nextMonth())
        bindControl("cal-next-year", () => api.nextYear())

        detachControls = () => removers.forEach((off) => off())
      }

      calendarEl.addEventListener("hakumi--calendar:change", () => {
        updateTitle()
        attachControls()
      })

      attachControls()
      updateTitle()
      wired = true
      return true
    }

    if (wire()) return
    const interval = setInterval(() => { if (wire()) clearInterval(interval) }, 50)
    setTimeout(() => clearInterval(interval), 5000)
  })()
</script>