use crate::components::ViewMode;
use chrono::{Datelike, NaiveDate};
use web_sys::MouseEvent;
use yew::prelude::*;

#[derive(Properties, PartialEq)]
pub struct CalendarHeaderProps {
    pub current_date: NaiveDate,
    pub view_mode: ViewMode,
    pub on_prev: Callback<MouseEvent>,
    pub on_next: Callback<MouseEvent>,
    pub on_today: Callback<MouseEvent>,
    #[prop_or_default]
    pub time_increment: Option<u32>,
    #[prop_or_default]
    pub on_time_increment_toggle: Option<Callback<MouseEvent>>,
    #[prop_or_default]
    pub on_print: Option<Callback<MouseEvent>>,
}

#[function_component(CalendarHeader)]
pub fn calendar_header(props: &CalendarHeaderProps) -> Html {
    let title = format!(
        "{} {}",
        get_month_name(props.current_date.month()),
        props.current_date.year()
    );

    html! {
        <div class="calendar-header">
            <div class="header-left">
                <button class="nav-button" onclick={props.on_prev.clone()}>{"‹"}</button>
                {
                    if let (Some(increment), Some(callback)) = (props.time_increment, &props.on_time_increment_toggle) {
                        html! {
                            <button class="time-increment-button" onclick={callback.clone()}>
                                {format!("{}", increment)}
                            </button>
                        }
                    } else {
                        html! {}
                    }
                }
                {
                    if let Some(print_callback) = &props.on_print {
                        html! {
                            <button class="print-button" onclick={print_callback.clone()} title="Print Calendar">
                                <i class="fas fa-print"></i>
                            </button>
                        }
                    } else {
                        html! {}
                    }
                }
            </div>
            <h2 class="month-year">{title}</h2>
            <div class="header-right">
                <button class="today-button" onclick={props.on_today.clone()}>{"Today"}</button>
                <button class="nav-button" onclick={props.on_next.clone()}>{"›"}</button>
            </div>
        </div>
    }
}

fn get_month_name(month: u32) -> &'static str {
    match month {
        1 => "January",
        2 => "February",
        3 => "March",
        4 => "April",
        5 => "May",
        6 => "June",
        7 => "July",
        8 => "August",
        9 => "September",
        10 => "October",
        11 => "November",
        12 => "December",
        _ => "Invalid",
    }
}