Calendar

use blinc_cn as cn;
use blinc_core::reactive::{Signal, computed};
use blinc_layout::{binding::IntoReactive, prelude::*};

pub fn calendar_demo(date: Signal<Option<cn::CalendarDay>>) -> Div {
    div()
        .class("demo-calendar")
        .child(
            cn::calendar(date)
                .today(cn::CalendarDay::new(2026, 11, 4))
                .week_start(1)
                .events(vec![cn::CalendarEvent::new(
                    cn::CalendarDay::new(2026, 11, 12),
                    "Design review",
                )]),
        )
        .child(
            bound_text(computed(move |g| {
                g.get(date)
                    .flatten()
                    .map(|day| format!("Selected: {:04}-{:02}-{:02}", day.year, day.month, day.day))
                    .unwrap_or_else(|| "Choose a date".into())
            }))
            .class("demo-caption"),
        )
}

fn bound_text(value: impl IntoReactive<String>) -> Text {
    Text::bound(value.into_reactive())
}

@layer components {
  .cn-calendar {
    flex-direction: column;
    gap: 12px;
    align-self: flex-start;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    font-family: var(--font-sans);
  }

  .cn-calendar-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cn-calendar-caption {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  .cn-calendar-caption .cn-select-trigger {
    height: 28px;
    padding: 0 6px;
  }

  .cn-calendar-caption .cn-select-item {
    justify-content: center;
  }

  .cn-calendar-nav {
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-state),
      color var(--duration-fast) var(--ease-state);
  }

  .cn-calendar-nav:hover {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-primary);
  }

  .cn-calendar-nav:disabled {
    opacity: 0.4;
    cursor: default;
  }

  .cn-calendar-body {
    flex-direction: column;
    gap: 2px;
  }

  .cn-calendar-body:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .cn-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 36px);
  }

  .cn-calendar-months {
    overflow: hidden;
    margin: -4px;
    padding: 4px;
  }

  .cn-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 36px);
    row-gap: 2px;
  }

  .cn-calendar-grid[data-enter="next"] {
    animation: cn-calendar-from-next var(--duration-normal) var(--ease-nav);
  }

  .cn-calendar-grid[data-enter="prev"] {
    animation: cn-calendar-from-prev var(--duration-normal) var(--ease-nav);
  }

  .cn-calendar-grid[data-leaving="next"] {
    animation: cn-calendar-to-prev var(--duration-normal) var(--ease-nav) forwards;
  }

  .cn-calendar-grid[data-leaving="prev"] {
    animation: cn-calendar-to-next var(--duration-normal) var(--ease-nav) forwards;
  }

  @keyframes cn-calendar-from-next {
    from {
      transform: translateX(260px);
      opacity: 0.4;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes cn-calendar-from-prev {
    from {
      transform: translateX(-260px);
      opacity: 0.4;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes cn-calendar-to-prev {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(-260px);
      opacity: 0.4;
    }
  }

  @keyframes cn-calendar-to-next {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(260px);
      opacity: 0.4;
    }
  }

  .cn-calendar-weekday {
    height: 28px;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
  }

  .cn-calendar-day {
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    outline: 0 solid var(--focus-ring);
    outline-offset: 1px;
    transition: background var(--duration-fast) var(--ease-state),
      color var(--duration-fast) var(--ease-state);
  }

  .cn-calendar-day:hover {
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
  }

  .cn-calendar-day:active {
    transform: scale(0.94);
  }

  .cn-calendar-day[data-outside] {
    color: var(--text-tertiary);
  }

  .cn-calendar-day[data-today] {
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
  }

  .cn-calendar-day[data-selected],
  .cn-calendar-day[data-selected]:hover {
    background: var(--cn-calendar-selected-bg, var(--primary)) !important;
    color: var(--cn-calendar-selected-color, var(--text-inverse)) !important;
  }

  .cn-calendar-day[data-focus-visible] {
    outline-width: 2px;
  }

  .cn-calendar-day:disabled {
    opacity: 0.4;
    cursor: default;
  }

  .cn-calendar-event {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: var(--primary);
  }

  .cn-calendar-event--icon {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: transparent;
    color: var(--primary);
  }

  .cn-calendar-day[data-selected] .cn-calendar-event {
    background: var(--cn-calendar-selected-color, var(--text-inverse)) !important;
  }

  .cn-calendar-day[data-selected] .cn-calendar-event--icon {
    background: transparent !important;
    color: var(--cn-calendar-selected-color, var(--text-inverse)) !important;
  }
}