use chrono::{Datelike, Local};
use dioxus::prelude::*;
use dioxus_primitives::slider::{SliderTrack, SliderValue};
use prost_types::Timestamp;
use time::Date;

use crate::{
	components::{
		date_picker::{DatePicker, DatePickerInput},
		playback::{Timeline, Viewport},
		slider::{Slider, SliderRange, SliderThumb},
	},
	rpc::{azki::MediaPlaybackRequest, get_rpc_client},
};
const PLAYER_CSS: Asset = asset!("/assets/styling/player.scss");

#[component]
pub fn Player() -> Element
{
	let mut selected_date = use_signal(|| {
		let now = Local::now();
		Some(Date::from_ordinal_date(now.year(), now.ordinal() as u16).unwrap())
	});
	let mut zoom = use_signal(|| 1.0 as f32);
	let time = use_signal(|| 0 as i64);
	let playbackResult = use_resource(use_reactive!(|(selected_date)| async move {
		let mut client = get_rpc_client();
		info!("Load data");
		let now = selected_date.cloned().unwrap();
		let from = Timestamp::date(now.year() as i64, now.month() as u8, now.day()).unwrap();
		let result = client
			.get_media_playback(MediaPlaybackRequest { date: Some(from) })
			.await;
		if let Ok(entries) = result
		{
			let res = entries.into_inner();
			return Ok(res);
		}
		else
		{
			let err = result.err().unwrap();
			let msg = err.message();
			return Err(format!("Failed to load results: {msg}"));
		}
	}));
	let info = match playbackResult.cloned()
	{
		Some(value) => match value
		{
			Ok(result) => Some(result),
			Err(_) => None,
		},
		_ => None,
	};
	rsx! {
		document::Link { rel: "stylesheet", href: PLAYER_CSS }
		div{
			id: "player",
			div {
				id: "head",
				Slider{
					value: SliderValue::Single(zoom() as f64),
					horizontal: true,
					min: 1.0,
					max: 5.0,
					step: 0.1,
					on_value_change: move |val| {
						let SliderValue::Single(v) = val;
						zoom.set(v as f32);
					},
					SliderTrack{
						SliderRange{}
						SliderThumb{}
					}
				},
				DatePicker{
					selected_date,
					 on_value_change: move |v| {
						selected_date.set(v);
					},
					DatePickerInput{}
				},
			}
			Viewport { playback_info: info.clone(), time }
			Timeline { playback_info: info, zoom, time }
		}
	}
}