use crate::*;
use yew::prelude::*;
use uuid::Uuid;
mod flex;
mod grid;
pub struct Container {
  link: ComponentLink<Self>,
  props: Properties,
  id: Uuid,
}
#[derive(Properties, Clone, Debug, PartialEq)]
pub struct Properties {
  #[prop_or_default]
  pub is: Elem,
  #[prop_or_default]
  pub children: Children,
  #[prop_or_default]
  pub display: String,
  #[prop_or_default]
  pub flex_direction: String,
  #[prop_or_default]
  pub justify_content: String,
  #[prop_or_default]
  pub hanging_punctauation: MultiValue<String>,
  #[prop_or_default]
  pub hyphens: String,
  #[prop_or_default]
  pub letter_spacing: Unit,
  #[prop_or_default]
  pub overflow_wrap: String,
  #[prop_or_default]
  pub line_break: String,
  #[prop_or_default]
  pub tab_size: Unit,
  #[prop_or_default]
  pub text_align: String,
  #[prop_or_default]
  pub text_align_last: String,
  #[prop_or_default]
  pub text_indent: Unit,
  #[prop_or_default]
  pub text_justify: String,
  #[prop_or_default]
  pub text_size_adjust: Unit,
  #[prop_or_default]
  pub text_transform: String,
  #[prop_or_default]
  pub white_space: String,
  #[prop_or_default]
  pub word_break: String,
  #[prop_or_default]
  pub word_spaceing: Unit,
  #[prop_or_default]
  pub padding: Positional,
  #[prop_or_default]
  pub padding_top: Unit,
  #[prop_or_default]
  pub padding_bottom: Unit,
  #[prop_or_default]
  pub padding_left: Unit,
  #[prop_or_default]
  pub padding_right: Unit,
  #[prop_or_default]
  pub margin: Positional,
  #[prop_or_default]
  pub margin_top: Unit,
  #[prop_or_default]
  pub margin_bottom: Unit,
  #[prop_or_default]
  pub margin_left: Unit,
  #[prop_or_default]
  pub margin_right: Unit,
  #[prop_or_default]
  pub color: Color,
  #[prop_or_default]
  pub background_attachment: String,
  #[prop_or_default]
  pub background_color: Color,
  #[prop_or_default]
  pub background_image: String,
  #[prop_or_default]
  pub background_position: MultiValue<Unit>,
  #[prop_or_default]
  pub background_repeat: String,
  #[prop_or_default]
  pub flex_grow: MultiValue<String>,
  #[prop_or_default]
  pub flex_shrink: MultiValue<String>,
  #[prop_or_default]
  pub flex_basis: MultiValue<Unit>,
  #[prop_or_default]
  pub flex_wrap: String,
  #[prop_or_default]
  pub flex_flow: String,
  #[prop_or_default]
  pub flex: String,
  #[prop_or_default]
  pub align_items: String,

}
impl Properties {
  fn to_style(&self, id: Uuid) -> String {

    let styles = format!( r#" 
          #{uuid} {{
          background-attachment: {background_attachment}; 
          background-color: {background_color}; 
          background-image: {background_image}; 
          background-position: {background_position}; 
          color: {color}; 
          display: {display}; 
          hanging_punctauation: {hanging_punctauation}; 
          hyphens: {hyphens}; 
          justify-content: {justify_content}; 
          letter-spacing: {letter_spacing}; 
          line-break: {line_break}; 
          overflow_wrap: {overflow_wrap}; 
          padding-bottom: {padding_bottom}; 
          margin: {margin}; 
          padding-left: {padding_left}; 
          padding-right: {padding_right}; 
          padding-top: {padding_top}; 
          padding: {padding}; 
          tab-size: {tab_size}; 
          text-align-last: {text_align_last}; 
          text-align: {text_align}; 
          text-indent: {text_indent}; 
          flex-shrink: {flex_shrink} ; 
          flex-basis: {flex_basis}; 
          flex-wrap: {flex_wrap}; 
          flex-flow: {flex_flow}; 
          flex: {flex}; 
          flex-grow: {flex_grow}; 
          align-items: {align_items}; 
          }}
          "#, 
            uuid = id, 
            flex_shrink= self.flex_shrink,
            flex_basis= self.flex_basis,
            flex_wrap= self.flex_wrap,
            flex_flow= self.flex_flow,
            flex= self.flex,
            flex_grow= self.flex_grow,
            align_items= self.align_items,
            background_attachment = self.background_attachment,
            background_color = self.background_color,
            background_image = self.background_image,
            background_position = self.background_position,
            display = self.display,
            padding_right = self.padding_right,
            padding_left = self.padding_left,
            padding_top = self.padding_top,
            padding_bottom = self.padding_bottom,
            margin = self.margin,
            color = self.color,
            hanging_punctauation = self.hanging_punctauation,
            hyphens = self.hyphens,
            letter_spacing = self.letter_spacing,
            line_break = self.line_break,
            justify_content = self.justify_content,
            overflow_wrap = self.overflow_wrap,
            padding = self.padding,
            tab_size = self.tab_size,
            text_align = self.text_align,
            text_align_last = self.text_align_last,
            text_indent = self.text_indent,
            );
          styles

  }
}
//Box is a layout primative it is most used to layout elem and as a geniric containers (div)
impl Component for Container {
  type Message = ();
  type Properties = Properties;
  fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
    let id = Uuid::new_v4();
    Self { link, props, id}
  }
  fn update(&mut self, _msg: Self::Message) -> ShouldRender {
    true
  }
  fn change(&mut self, props: Self::Properties) -> ShouldRender {
    if self.props != props {
      self.props = props;
      true
    } else {
      false
    }
  }
  fn view(&self) -> Html {
    let styles = self.props.to_style(self.id);
    match self.props.is {
      Elem::Div => {
        html! {
          <>
            <style>
              {styles}
            </style>
            <div id={self.id}>
              {self.props.children.clone()}
            </div>
          </>
        }
      }
      Elem::Paragraph => {
        html! {
          <>
            <style>
              {styles}
            </style>
            <p id={self.id}>
              {self.props.children.clone()}
            </p>
          </>
        }
      }
      Elem::Heading(lvl) => match lvl {
        1 => {
          html! {
            <>
              <style>
                {styles}
              </style>
              <h1 id={self.id}>
                {self.props.children.clone()}
              </h1>
            </>
          }
        }
        2 => {
          html! {
            <>
              <style>
                {styles}
              </style>
              <h2 id={self.id}>
                {self.props.children.clone()}
              </h2>
            </>
          }
        }
        3 => {
          html! {
            <>
              <style>
                {styles}
              </style>
              <h3 id={self.id}>
                {self.props.children.clone()}
              </h3>
            </>
          }
        }
        4 => {
          html! {
            <>
              <style>
                {styles}
              </style>
              <h4 id={self.id}>
                {self.props.children.clone()}
              </h4>
            </>
          }
        }
        5 => {
          html! {
            <>
              <style>
                {styles}
              </style>
              <h5 id={self.id}>
                {self.props.children.clone()}
              </h5>
            </>
          }
        }
        6 => {
          html! {
            <>
              <style>
                {styles}
              </style>
              <h6 id=self.id>
                {self.props.children.clone()}
              </h6>
            </>
          }
        }
        _ => {
          todo!("Handle")
        }
      },
      Elem::Button => {
        html! {
          <>
            <styles>
              {styles}
            </styles>
            <button id=self.id>
              {self.props.children.clone()}
            </button>
          </>
        }
      }
      Elem::Span => {
        html! {
          <>
            <styles>
              {styles}
            </styles>
            <span  id=self.id>
              {self.props.children.clone()}
            </span>
          </>
        }
      }
      Elem::Anchor(_) => {
        html! {
          <>
            <style>
              {styles}
            </style>
            <a id=self.id>
              {self.props.children.clone()}
            </a>
          </>
        }
      }
      Elem::Footer => {
        html! {
          <footer>{self.props.children.clone()}</footer>
        }
      }
      Elem::Header => {
        html! {
          <header>{self.props.children.clone()}</header>
        }
      }
      Elem::Nav => {
        html! {
          <header>{self.props.children.clone()}</header>
        }
      }
      Elem::Input => {
        html! {
          <input r#type={"text"}/>
        }
      }
      Elem::OrderedList => {

        html! {
          <ol >
          {self.props.children.clone()}
          </ol>

        }
      }
      Elem::UnorderedList => {
        html!{
          <ul style=styles>
            {self.props.children.clone()}
          </ul>
        }
      }
      Elem::ListItem => {
        html! {
          <li>{self.props.children.clone()}</li>
        }
      }
    }
  }
}
