use yew::prelude::*;
use crate::pages::blog::content;
use crate::pages::blog::content::BlogEntry;

#[derive(Clone, Debug, Eq, PartialEq, Properties)]
pub struct Props {
  pub seed: u8,
}

pub struct Author {
  author: content::Author,
}
impl Component for Author {
  type Message = ();
  type Properties = Props;

  fn create(ctx: &Context<Self>) -> Self {
    Self { author: content::Author::from_seed(ctx.props().seed), }
  }

  fn changed(&mut self, ctx: &Context<Self>, _old_props: &Self::Properties) -> bool {
    self.author = content::Author::from_seed(ctx.props().seed);
    true
  }

  fn view(&self, _ctx: &Context<Self>) -> Html {
    let Self { author } = self;
    html! {
      <div class="tile is-parent container box is-small is-flex-shrink-5 mb-5 mt-5">
        <img alt="insert pfp here" loading="eager" class="image is-128x128 is-square is-inline-block mg-small" src={author.image_url.clone()} />
        <div class="columns is-narrow ml-3 is-inline-block is-vcentered is-centered is-gapless is-multiline is-0 mt-4" style="vertical-align: top !important;">
          <p class="column is-narrow" style="filter: url(post.bloom.svg#process) !important; color: #B4BEFE !important;">{author.name.clone()}</p>
          <p class="column is-narrow" style="background-clip: text !important; background-image: linear-gradient(45deg, #5BCEFAFF, #F5A9B8FF, #FFFFFFFF) !important;">
            { for author.keywords.iter().map(|tag| html! { <p>{ tag }</p> }) }
          </p>
        </div>
        <hr style="background-color: #B4BEFE60 !important;" />
        <p class="subtitle">{r#"about me"#}</p>
        <div class="content is-size-7">
          { author.about.clone() }
        </div>
      </div>
    }
  }
}

      /* 
      <div class="section container">
        <div class="tile is-ancestor is-vertical">
          <div class="tile is-parent">
            <article class="tile is-child notification is-light">
              <p class="title">{ &author.name }</p>
            </article>
          </div>
          <div class="tile">
            <div class="tile is-parent is-3">
              <article class="tile is-child notification">
                <p class="title">{ "Interests" }</p>
                <div class="tags">
                  { for author.keywords.iter().map(|tag| html! { <span class="tag is-info">{ tag }</span> }) }
                </div>
              </article>
            </div>
            <div class="tile is-parent">
              <figure class="tile is-child image is-square">
                <img alt="The author's profile picture." src={author.image_url.clone()} />
              </figure>
            </div>
            <div class="tile is-parent">
              <article class="tile is-child notification is-info">
                <div class="content">
                  <p class="title">{ "About me" }</p>
                  <div class="content">
                    { author.about.clone() }
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div>
      */