use crate::pages::blog::content;
use crate::pages::blog::content::{BlogEntry, Post};
use yew::prelude::*;
use crate::pages::blog::authorcard::AuthorCard;
use crate::pages::blog::entrycard::EntryCard;

#[derive(Clone, Debug, Eq, PartialEq, Properties)]
pub struct Props {
  pub id: 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_id(ctx.props().id),
    }
  }

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

  fn view(&self, _ctx: &Context<Self>) -> Html {
    let Self { author } = self;
    let id = author.id;
    let cards: Vec<_> = (0..Post::POSTS.len()) // TODO: ... | add var
      .filter(|&id_offset| {
        Post::from_id(id_offset as u8)
          .authors
          .iter()
          .any(|id1| *id1 == id)
      })
      .map(|id_offset| html! {<EntryCard id={id_offset as u8} />})
      .collect();
    html! {
      <div style="
        display: flex !important;
        width: 100% !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin-bottom: 2rem !important;
      ">
        <h2 style="text-align: center !important;">{ "about me" }</h2>
        <div style="
          display: flex !important;
          width: 100% !important;
          flex-direction: row !important;
          flex-wrap: wrap !important;
          justify-content: center !important;
          margin-bottom: 1rem !important;
        "><AuthorCard {id} /></div>
        <h2 style="text-align: center !important;">{ "my posts" }</h2>
        <div style="
          display: flex !important;
          width: 100% !important;
          flex-direction: row !important;
          flex-wrap: wrap !important;
          justify-content: center !important;
        ">{ for cards }</div>
      </div>
    }
  }
}