use crate::backend::data::Company;
use crate::backend::company::UpdateCompany;
use crate::components::modal_box::{
    DialogOpener, DlgNotLoaded, ModalBody, ModalDialog, ModalFooter,
};
use crate::components::server_err::ServerErr;
use crate::locales::trl;
use crate::validator::Validator;
use leptos::*;
use leptos_router::*;
use crate::components::validation_err::ValidationErr;

#[component]
pub fn CompanyEdit(
    company: ReadSignal<Company>,
    opener: DialogOpener,
) -> impl IntoView {
    let update_company = create_server_action::<UpdateCompany>();
    let upd_val = update_company.value();
    let validator = Validator::new();

    view! {
            <ActionForm
                on:submit=move |ev| {
                    let act = UpdateCompany::from_event(&ev);
                    if !act.is_err() {
                        validator.check(&act.unwrap().company, &ev);
                    }
                }
                action=update_company>
            <ModalDialog opener=opener title="Edit company">
            <ModalBody>
                <ServerErr result={upd_val} opener=opener/>
                <ValidationErr validator=validator />
                <input type="hidden" value={move || company.get().id()} name="company[id]"/>
                <div class="row">
                    <div class="col mb-3">
                        <label  for="nameWithTitle" class="form-label">"Name"</label>
                        <input
                            type="text"
                            id="nameWithTitle"
                            class="form-control"
                            placeholder="Enter Name"
                            prop:value={move || company.get().name}
                            name="company[name]"
                        />
                    </div>
                </div>
                <div class="row">
                    <div class="col mb-3">
                        <label  for="street" class="form-label">"Street"</label>
                        <input
                            type="text"
                            id="street"
                            class="form-control"
                            placeholder="Enter Street"
                            prop:value={move || company.get().street}
                            name="company[street]"
                        />
                    </div>
                    <div class="col-4 mb-3">
                        <label  for="houseNumber" class="form-label">"House number"</label>
                        <input
                            type="text"
                            id="houseNumber"
                            class="form-control"
                            placeholder="Enter House number"
                            prop:value={move || company.get().house_number}
                            name="company[house_number]"
                        />
                    </div>
                </div>
                <div class="row">
                    <div class="col-4 mb-3">
                        <label  for="zip" class="form-label">"ZIP code"</label>
                        <input
                            type="text"
                            id="zip"
                            class="form-control"
                            placeholder="Enter ZIP code"
                            prop:value={move || company.get().zip_code}
                            name="company[zip_code]"
                        />
                    </div>
                    <div class="col mb-3">
                        <label  for="city" class="form-label">"City"</label>
                        <input
                            type="text"
                            id="city"
                            class="form-control"
                            placeholder="Enter City"
                            prop:value={move || company.get().city}
                            name="company[city]"
                        />
                    </div>
                </div>
            </ModalBody>
            <ModalFooter>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"
                    on:click=move |_| {validator.reset(); opener.hide()}>
                    {trl("Close")}
                </button>
                <button type="submit" class="btn btn-primary">
                    {trl("Save changes")}
                </button>
            </ModalFooter>
        </ModalDialog>
        </ActionForm>
    }
}
