use yew::prelude::*;

#[derive(Clone)]
pub struct Name {
    pub prefix: String,
    pub first_name: String,
    pub middle_name: String,
    pub last_name: String,
    pub suffix: String,
}

impl Name {
    pub fn new() -> Self { 
        Self {
            prefix: String::new(),
            first_name: String::new(),
            middle_name: String::new(),
            last_name: String::new(),
            suffix: String::new(),
        }
    }
    pub fn formatted_name(&self) -> String {
        let mut formatted_name = String::new();

        if !self.prefix.is_empty() {
            formatted_name.push_str(&self.prefix);
        }
        if !self.first_name.is_empty() {
            formatted_name.push_str(" ");
            formatted_name.push_str(&self.first_name);
        }
        if !self.middle_name.is_empty() {
            formatted_name.push_str(" ");
            formatted_name.push_str(&self.middle_name);
        }
        if !self.last_name.is_empty() {
            formatted_name.push_str(" ");
            formatted_name.push_str(&self.last_name);
        }
        if !self.suffix.is_empty() {
            formatted_name.push_str(", ");
            formatted_name.push_str(&self.suffix);
        }

        formatted_name
    }
}

pub struct NameView {
    link: ComponentLink<Self>,
    value: Name,
    oninput: Callback<Name>,
    //errors: Vec<String>,
}

pub enum Msg {
    UpdatePrefix(String),
    UpdateFirstName(String),
    UpdateMiddleName(String),
    UpdateLastName(String),
    UpdateSuffix(String),
}

#[derive(Clone, PartialEq, Properties)]
pub struct Props {
    pub oninput: Callback<Name>,
    //pub errors: Vec<String>,
}

impl Component for NameView {
    type Message = Msg;
    type Properties = Props;
    fn create(props: <Self as yew::Component>::Properties, link: yew::html::Scope<Self>) -> Self {
        Self {
            link,
            value: Name::new(),
            oninput: props.oninput,
        }
    }
    fn update(&mut self, msg: <Self as yew::Component>::Message) -> bool {
        match msg {
            Msg::UpdatePrefix(p) => self.value.prefix = p,
            Msg::UpdateFirstName(f) => self.value.first_name = f,
            Msg::UpdateMiddleName(m) => self.value.middle_name = m,
            Msg::UpdateLastName(l) => self.value.last_name = l,
            Msg::UpdateSuffix(s) => self.value.suffix = s,
        };
        self.oninput.emit(self.value.clone());
        true
    }
    fn change(&mut self, props: <Self as yew::Component>::Properties) -> bool { 
        self.oninput = props.oninput;
        true
    }
    fn view(&self) -> yew::virtual_dom::VNode {
        html!{
            <>
                <h3 class="subtitle">{ "Name" }</h3>

                <div class="columns">
                
                    <div class="field column">
                        <label class="label">{ "Prefix" }</label>
                        <div class="control">
                            <input  id="prefix" 
                                    type="text" 
                                    placeholder="Sir" 
                                    oninput=self.link.callback(|e: InputData| Msg::UpdatePrefix(e.value))
                            />
                        </div>
                    </div>

                    <div class="field column">
                        <label class="label">{ "First name" }</label>
                        <div class="control">
                            <input  id="first_name" 
                                    type="text" 
                                    placeholder="Arthur" 
                                    oninput=self.link.callback(|e: InputData| Msg::UpdateFirstName(e.value))
                            />
                        </div>
                    </div>

                    <div class="field column">
                        <label class="label">{ "Middle name" }</label>
                        <div class="control">
                            <input  id="middle_name" 
                                    type="text" 
                                    placeholder="Charles"
                                    oninput=self.link.callback(|e: InputData| Msg::UpdateMiddleName(e.value))
                            />
                        </div>
                    </div>
                    
                    <div class="field column">
                        <label class="label">{ "Last name" }</label>
                        <div class="control">
                            <input  id="last_name"
                                    type="text" 
                                    placeholder="Clarke" 
                                    oninput=self.link.callback(|e: InputData| Msg::UpdateLastName(e.value))
                            />
                        </div>
                    </div>

                    <div class="field column">
                        <label class="label">{ "Suffix" }</label>
                        <div class="control">
                            <input  id="suffix" 
                                    type="text" 
                                    placeholder="CBE FRAS" 
                                    oninput=self.link.callback(|e: InputData| Msg::UpdateSuffix(e.value))
                            />
                        </div>
                    </div>

                </div>
            </>
        }
    }
}