use leptos::prelude::*;
use crate::commands::*;
use leptos::task::spawn_local;
use leptos::web_sys::FormData;
use leptos::form::FromFormData;
use std::collections::HashMap;
use crate::types::*;

#[component]
pub fn Cafe() -> impl IntoView {
	let acc = signal(Account::Sumpf);
	view! {
		<Reception
			acc=acc.0
		/>
		<InvForm />
	}
}

#[component]
fn Reception(acc: ReadSignal<Account>) -> impl IntoView {
	view! {
		<div
			id="cafe-voucher"
		>
			<h1>
				{move || format!("{}", acc.get())}
			</h1>
			<div
				class="h-container"
			>
				<SwapButton
					store=Store::Aldi
				/>
				<SwapButton
					store=Store::Edeka
				/>
				<SwapButton
					store=Store::Dm
				/>
				<SwapButton
					store=Store::Lidl
				/>
				<SwapButton
					store=Store::Rewe
				/>
				<SwapButton
					store=Store::Tegut
				/>
			</div>
		</div>
	}
}

#[component]
fn SwapButton(store: Store) -> impl IntoView {
	view! {
		<button
			on:click=move |_| {
				spawn_local(async move {
					swap(store, 0).await.unwrap();
				});
			}
			class="column"
		>
			<super::store::Logo store=store />
		</button>
	}
}

#[component]
fn StoreInput(store: Store) -> impl IntoView {
	let txt = format!("{}", Into::<String>::into(&store));
	view! {
		<div
			class="labelled-input"
		>
			<label
				for=txt.clone()
			>
				<super::store::Logo store=store />
			</label>
			<input
				type="number"
				name=txt.clone()
				id=txt.clone()
				min=0
			/>
		</div>
	}
}

#[component]
fn CashInput(value: RwSignal<String>) -> impl IntoView {
	let txt = "cash";
	view! {
		<div
			class="labelled-input"
		>
			<label
				for=txt.clone()
			>
				<img
					src="assets/cash.svg"
					class="logo"
					alt="Bargeld"
				/>
			</label>
			<input
				type="number"
				name=txt.clone()
				id=txt.clone()
				min=0
				step=0.01
				bind:value=value
				on:change=move |_| {
					println!("{:?}", value.get());
				}
			/>
		</div>
	}
}

#[component]
fn AccRadio(acc: Account) -> impl IntoView {
	let txt = format!("{}", Into::<String>::into(&acc));
	let id = format!("acc-{}", txt);
	view! {
		<div
			class="labelled-input"
		>
			<input
				type="radio"
				name="acc"
				id=id.clone()
				value=txt
				required
			/>
			<label
				for=id.clone()
			>
				{format!("{}", acc)}
			</label>
		</div>
	}
}

#[component]
fn SubmitButton() -> impl IntoView {
	view! {
		<button
			type="submit"
			class="shout"
		>
			"Senden"
		</button>
	}
}

#[component]
fn InvForm() -> impl IntoView {
	let cash = RwSignal::new(String::from("0.00"));
	view! {
		<form
			on:submit=move |ev| {
				ev.prevent_default();
				let data = FromFormData::from_event(ev.as_ref()).unwrap();
				spawn_local(async move {inventory(data).await;});
			}
		>
			<AccRadio acc=Account::Sumpf />
			<AccRadio acc=Account::Heinersyndikat />
			<StoreInput store=Store::Aldi />
			<StoreInput store=Store::Dm />
			<StoreInput store=Store::Lidl />
			<StoreInput store=Store::Rewe />
			<StoreInput store=Store::Tegut />
			<CashInput value=cash />
			<SubmitButton />
		</form>
	}
}