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(
    cx: Scope,
    company: ReadSignal<Option<Company>>,
    opener: DialogOpener,
) -> impl IntoView {
    view! {cx,
        {move ||
            if let Some(c) = company.get() {
                let update_company = create_server_action::<UpdateCompany>(cx);
                let upd_val = update_company.value();
                let validator = Validator::new(cx);
                view! {cx,
                    <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=c.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"
                                    value=c.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"
                                    value=c.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"
                                    value=c.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"
                                    value=c.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"
                                    value=c.city
                                    name="company[city]"
                                />
                            </div>
                        </div>
                    </ModalBody>
                    <ModalFooter>
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" on:click=move |_| opener.hide()>
                            {trl(cx, "Close")}
                        </button>
                        <button type="submit" class="btn btn-primary">
                            {trl(cx, "Save changes")}
                        </button>
                    </ModalFooter>
                </ModalDialog>
                </ActionForm>
                }
            } else {
                view! {cx,
                <DlgNotLoaded opener=opener title="Edit company" />
                }
            }
        }
    }
}