use yew::prelude::*;
use crate::view::VCardPropertyInputComponent;

pub mod vcard;
pub mod address;
pub mod name;
pub mod telephone;
pub mod utility;

pub trait VCardPropertyInputObject<C: VCardPropertyInputComponent<Self>> 
    where   Self: Sized 
{
    fn new() -> Self;
    fn get_input_fields(&self, link: &ComponentLink<C>) -> Vec<VCardPropertyInputField>;
    fn render(&self, link: &ComponentLink<C>) -> Html {
        html!{
            <div class="columns is-mobile is-multiline">
                { 
                    for self.get_input_fields(link).iter().map(|field|
                        field.render()
                    ) 
                }
            </div>
        }
    }
    fn is_empty(&self) -> bool;
}

#[derive(Debug,Clone,PartialEq)]
pub struct Error {
    pub msg: String,
}

pub enum VCardPropertyInputField {
    Text {
        label: String,
        id: Option<String>,
        placeholder: Option<String>,
        oninput: Callback<InputData>,
        value: String,
    },
    CheckBox {
        label: String,
        id: Option<String>,
        onclick: Callback<MouseEvent>,
        value: bool,
    },
}

impl VCardPropertyInputField {
    pub fn render(&self) -> Html {
        match self {
            Self::Text {
                label,
                id,
                placeholder,
                oninput,
                value: _,
            } => Self::text_field_input(label, id, placeholder, oninput),
            Self::CheckBox {
                label,
                id,
                onclick,
                value,
            } => Self::checkbox_field_input(label, id, value, onclick),
        }
    }
    fn text_field_input(label: &str, id: &Option<String>, placeholder: &Option<String>, oninput: &Callback<InputData>) -> Html {
        html!{
            <div class="field column 
                        is-one-fifth-widescreen
                        is-one-quarter-desktop
                        is-one-third-tablet
                        is-half-mobile" >
                <label class="label">{ label }</label>
                <div class="control">
                    <input  id=id.as_ref().unwrap_or(&"".to_string())
                            type="text" 
                            placeholder=placeholder.as_ref().unwrap_or(&"".to_string())
                            oninput=oninput
                    />
                </div>
            </div>
        }
    }
    fn checkbox_field_input(label: &str, id: &Option<String>, checked: &bool, onclick: &Callback<MouseEvent>) -> Html {
        html!{
            <div class="field column 
                        is-one-fifth-widescreen 
                        is-one-quarter-desktop 
                        is-one-third-tablet 
                        is-half-mobile" >
                <label class="checkbox">
                    <input  id=id.as_ref().unwrap_or(&"".to_string())
                            type="checkbox" 
                            checked=*checked
                            onclick=onclick
                    />
                    { label }
                </label>
            </div>
        }
    }
}