use leptos::*;
use crate::backend::data::{ResProperty, SlotType};
use crate::backend::property::{CreateProperty, EditProperty};
use crate::components::data_form::DataForm;
use crate::components::modal_box::DialogOpener;
use crate::locales::trl;

#[component]
fn form_inner(property: ReadSignal<ResProperty>) -> impl IntoView {
    let active_str = create_rw_signal("false".to_string());
    view! {
        <input type="hidden" prop:value={move || property.get().id()} name="property[id]"/>
        <div class="row">
            <div class="col mb-3">
                <label  for="name" class="form-label">{trl("Name")}</label>
                <input
                    type="text"
                    id="name"
                    class="form-control"
                    placeholder={trl("Enter name")}
                    prop:value={move || property.get().name}
                    name="property[name]"
                />
            </div>
        </div>
        <div class="row">
            <div class="col mb-3">
                <label  for="description" class="form-label">{trl("Description")}</label>
                <input
                    type="text"
                    id="name"
                    class="form-control"
                    placeholder={trl("Enter description")}
                    prop:value={move || property.get().description}
                    name="property[description]"
                />
            </div>
        </div>
        <div class="row">
            <div class="col mb-3">
                <label  for="price" class="form-label">{trl("Price")}</label>
                <input
                    type="text"
                    id="name"
                    class="form-control"
                    placeholder=""
                    prop:value={move || property.get().price.to_string()}
                    name="property[price]"
                />
            </div>
        </div>
        <div class="row">
            <div class="col mb-3">
                <label for="slot" class="form-label">{trl("Time slot")}</label>
                <select id="slot" name="property[slot]" class="form-select">
                    <option prop:value={move || format!("{:?}", property.get().slot)}>{trl(&property.get().slot.to_string())}</option>
                    <option value="Quarter" selected=move || property.get().slot == SlotType::Quarter>{trl("Quarter an hour")}</option>
                    <option value="Half" selected=move || property.get().slot == SlotType::Half>{trl("Half an hour")}</option>
                    <option value="Hour" selected=move || property.get().slot == SlotType::Hour>{trl("Hour")}</option>
                    <option value="Day" selected=move || property.get().slot == SlotType::Day>{trl("Day")}</option>
                </select>
            </div>
        </div>
        {move || {
            active_str.set(if property.get().active {"true".to_string()} else {"false".to_string()});
            if property.get().id() != 0 {
                view! {
                    <div class="row">
                        <div class="col mb-3">
                            <input
                                type="checkbox"
                                id="active"
                                class="form-check-input"
                                prop:checked={move || property.get().active}
                                on:change=move |ev| active_str.set(if event_target_checked(&ev)
                                    { "true".to_string() } else { "false".to_string() })
                            />
                            <label  for="active" class="form-label">{trl("Active")}</label>
                            <input type="hidden" prop:value=active_str name="property[active]"/>
                        </div>
                    </div>
                }
            } else {
                view! {<div></div>}
            }
        }
    }}
}

#[component]
pub fn property_edit(property: ReadSignal<ResProperty>, edit: bool, opener: DialogOpener) -> impl IntoView {
    let action_create = create_server_action::<CreateProperty>();
    let action_edit = create_server_action::<EditProperty>();

    view! {
        {move ||
            if edit {
            view! {<DataForm opener=opener action=action_edit title="Edit property">
                <FormInner property=property/>
            </DataForm>}}
            else {
            view! {<DataForm opener=opener action=action_create title="Create property">
                <FormInner property=property/>
            </DataForm>}}
        }
    }
}