// IMPORT MODULES
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import i18n from '../i18n';
import '../i18n';
import { withTranslation } from 'react-i18next';
// IMPORT COMPONENTS
import Breadcrumb from "../components/Global/Breadcrumb"; 

//    TAB_1
// import RightArrowBlue from "../svg/rightArrowBlue.svg";
// import TabIMG1 from "../img/tabImg_1.jpg";


class News extends React.Component {
  _isMounted = false;
  constructor(props) {
    super(props);

    this.state = {
        items: [],
        DataisLoaded: false
    };
  }
  // useEffect(() => {
  //   window.scrollTo(0, 0);
  // }, []);
  // STATE
  // const [pageIndex, setPageIndex] = useState(1);

  componentDidMount() {
    this.getTodos();
  }

  async getTodos() {
    this._isMounted = true;
    await  axios.get('http://127.0.0.1:8000/api/v1/categories/2')
      .then(res => {
        const items = res.data;
        if (this._isMounted) {
        this.setState({
                        items: items,
                        DataisLoaded: true
                    });
                    this._isMounted = false;
                    console.log(this.state.items['data'][0]['posts']);
                
        }

      })
      // console.log('salam');
      // console.log(this.state.items['data']);
  }

  componentWillUnmount() {
      console.log("novosti gutardy");
    }

  render() {
    const { DataisLoaded, items } = this.state;
      if (!DataisLoaded) return <div>
          <h1> Pleses wait some time.... </h1> </div> ;

          if(i18n.language == 'en')
          {
            this.componentDidMount();
            console.log('salam-en');
            
          }
          else
          {
            this.componentDidMount();
            console.log('salam-ru');
          }


    // console.log(this.state.item['data']);
  return (
    <section className="news">
      <Breadcrumb path_1="Новости" currentUrl="./news" />;
      <div className="container">
        <div className="news-inner">
          <div className="news-tab">
            <div className="tab-header">
              <h4 className="tab-header-text" id="tab-header-text">
                Новости
              </h4>
              <div className="tab-header-line"></div>
            </div>
            <div className="tab-wrapper">

              

            {items['data'][0]['posts'].map((item) => (
               
               
                <div className="tab" key={item.id}>
                <div className="tab-top">
                  <div>
                    <img src={ item['featured_images'][0]['path'] } alt="Turkmen carpets" />
                  </div>
                </div>
                <div className="tab-bottom">
                  <span className="tab-date">30.05.2021</span> 
                  <h2 className="tab-name">
                    {/* {item.id} */}
                  {
                (() => {
                  if(i18n.language == 'en')
                  {
                    return (
                       JSON.parse(item['translations'][0]['attribute_data']).title 
                  )
                  }
                  else if (i18n.language == 'ru')
                  {
                    return (
                      item.title
                      )
                  }
                  else {
                    return (
                      JSON.parse(item['translations'][1]['attribute_data']).title 
                    )
                }
                }) 
              }

                  </h2>
                  <div className="tab-header-link tab-link">
                    <Link to={`/blog/${item.slug}`}>
                      <span>Подробнее</span>
                      <div>
                        <img src={ item.featured_images.path } alt="RIGHTARROW" />
                      </div>
                    </Link>
                  </div>
                </div>
              </div>
              // )

              


              ))}

            </div>
          </div>
        </div>
        
      </div>
    </section>
  );
          }
};

export default withTranslation()(News);

// { JSON.parse(item['translations'][0]['attribute_data']).title }
 // elem.innerHTML= JSON.parse(this.state.items['data'][0]['posts'][0]['translations'][0]['attribute_data']).title;