import { HtmlHTMLAttributes, ReactHTML } from "react";

export interface INewsPics {
   Title: any;
   FileLeafRef: any;
   Id: any;
   BT_News_Publishing_Date: any;
   PublishingImage: any;
   NewsArticle: any;
 }

export default class LatestNews extends React.Component<ILatestNewsProps, any> {

   constructor() {
      super();
      this.state = {
         newsst: []
      };
   }
   // tslint:disable-next-line:typedef
   public componentDidMount() {
      // read items  from json func
      this._getNewsFeed();
   }
   // tslint:disable-next-line:typedef
   public componentDidUpdate(prevProps, prevState) {
      if (this.props.NewsCounter !== prevProps.NewsCounter ||
         this.props.listName !== prevProps.listName)
      // tslint:disable-next-line:one-line
      {
         this._getNewsFeed();  // if wp props settings compare were changed  previous state and reload
      }
   }

   public render(): React.ReactElement<ILatestNewsProps> {
      return (
         <div className="ArticleNewsWp">
            <NewsCard header={this.props.title}
               list={this.props.listName}
               surl={this.props.siteurl}
               CharCounter={this.props.CharCounter}
               items={this.state.newsst} />
         </div>
      );
   }

   public _getNewsFeed(options?: any): Promise<INewsPics[]> {
      return new Promise<INewsPics[]>((resolve: any) => {
         pnp.setup({
            sp: {
               headers: {
                  "Accept": "application/json; odata=verbose"
               }
            }
         });

         var SHAREPOINT_LIST: string = this.props.listName;
         var SHAREPOINT_MAX: string = this.props.NewsCounter;
         pnp.sp.web.lists.getByTitle(SHAREPOINT_LIST).items
            // tslint:disable-next-line:max-line-length
            .filter("ContentType eq 'BT_News_Feeds'")
            .top(Number(SHAREPOINT_MAX))
            .orderBy("BT_News_Publishing_Date", false)
            .get().then((response: any) => {
               let items: INewsPics[] = [];
               let promises: Promise<any>[] = [];
               // tslint:disable-next-line:typedef
               response.forEach(function (item: INewsPics) {
                  // tslint:disable-next-line:max-line-length
                  // tslint:disable-next-line:typedef
                  let promise = pnp.sp.web.lists.getByTitle(SHAREPOINT_LIST).items
                     .getById(item.Id).fieldValuesAsHTML
                     // tslint:disable-next-line:max-line-length
                     .select("Id", "Title", "FileLeafRef", "BT_News_Image", "BT_News_Publishing_Date", "BT_News_Article").get();
                  promises.push(promise);
                  promise.then((response: any) => {
                     // tslint:disable-next-line:max-line-length
                     items.push({ Id: item.Id, Title: item.Title, FileLeafRef: item.FileLeafRef, PublishingImage: item.PublishingImage, BT_News_Publishing_Date: item.BT_News_Publishing_Date, NewsArticle: item.NewsArticle });
                  });
                  console.log(item.BT_News_Publishing_Date);
               });
               Promise.all(promises).then((items: INewsPics[]) => {
                  this.setState({ newsst: items });
                  resolve(items);
                  console.log(items);
               });
            });
      });
   }
}

export class NewsCard extends React.Component<any, any> {
   // tslint:disable-next-line:typedef
   private _redirectToPage(event, itemId, SHAREPOINT_LIST) {
      try {
         location.href = this.props.surl + "/" + SHAREPOINT_LIST + "/" + itemId;
         console.log(location.href);
      }
      // tslint:disable-next-line:one-line
      catch (e) {
         if (itemId === "undefined")
         // tslint:disable-next-line:one-line
         {
            location.href = this.props.surl + "/" + SHAREPOINT_LIST + "/" + "PageNotFoundError.aspx";
            console.log(e);
         }
      }
   }

   public render(): JSX.Element {

      // tslint:disable-next-line:typedef
      var regex = /<img.*?src=['"](.*?)['"]/;
      var SL: string = this.props.list;
      var CH: string = this.props.CharCounter;
      // tslint:disable-next-line:typedef
      var finalArticle;
      var col: any = (this.props.items) ? this.props.items : [];
      return (
         <div className={styles.container}>
            <h3>{this.props.header}</h3>
            {
               col.map((item: INewsPics) => {
                  console.log("Publishing date:" + item.BT_News_Publishing_Date + " Title:" + item.Title);
                  // tslint:disable-next-line:typedef
                  var itemstring: any = (item.PublishingImage).toString();
                  // tslint:disable-next-line:typedef
                  var itemstringArticle: any = (item.NewsArticle).toString();
                  // tslint:disable-next-line:typedef
                  function strip(itemstringArticle) {
                     // tslint:disable-next-line:typedef
                     var resRndrArticle = new DOMParser().parseFromString(itemstringArticle, "text/html");
                     return resRndrArticle.body.textContent || "";
                  }
                  // tslint:disable-next-line:typedef
                  finalArticle = strip(itemstringArticle);
                  finalArticle = finalArticle.substring(0, CH);
                  return (
                     <div className={styles.container}>
                     <div className={styles.stapler}>
                        <div className={styles.NewsLeft}>
                           <img className={styles.newsimage} src={regex.exec(itemstring)[1]} alt="" />
                        </div>
                        <div className={styles.NewsRight}>
                           <b>{item.Title}</b>
                           <p>{finalArticle}
                              <b className={styles.Rm} onClick={(event) =>
                                 this._redirectToPage(event, item.FileLeafRef, SL)}> [... More]</b></p>
                           <b className={styles.NDate}>Article Date: {item.BT_News_Publishing_Date}</b>
                        </div>
                     </div>
                     <hr/>
                     </div>
                  );
               })
            }
         </div>
      );
   }
}