use chrono::{Datelike, Local};
use dioxus::prelude::*;
use prost_types::Timestamp;

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

#[component]
pub fn Player() -> Element {
	let playbackResult = use_resource(|| async move {
		let mut client = get_rpc_client();
		let now = Local::now();
		let from = Timestamp::date(now.year() as i64, now.month() as u8, now.day() as u8 - 4).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",
			}
			Viewport {  }
			Timeline { playbackInfo: info }
		}
	}
}