use crate::backend::data::Company;
use crate::backend::company::UpdateCompany;
use crate::components::modal_box::DialogOpener;
use leptos::*;
use crate::components::data_form::DataForm;
use crate::locales::trl;

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

    view! {
        <DataForm opener=opener action=update_company title="Edit company">
            <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">{trl("Name")}</label>
                    <input
                        type="text"
                        id="nameWithTitle"
                        class="form-control"
                        placeholder={trl("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">{trl("Street")}</label>
                    <input
                        type="text"
                        id="street"
                        class="form-control"
                        placeholder={trl("Enter Street")}
                        prop:value={move || company.get().street}
                        name="company[street]"
                    />
                </div>
                <div class="col-4 mb-3">
                    <label  for="houseNumber" class="form-label">{trl("House number")}</label>
                    <input
                        type="text"
                        id="houseNumber"
                        class="form-control"
                        placeholder={trl("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">{trl("ZIP code")}</label>
                    <input
                        type="text"
                        id="zip"
                        class="form-control"
                        placeholder={trl("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">{trl("City")}</label>
                    <input
                        type="text"
                        id="city"
                        class="form-control"
                        placeholder={trl("Enter City")}
                        prop:value={move || company.get().city}
                        name="company[city]"
                    />
                </div>
            </div>
        </DataForm>
    }
}
