// IMPORT MODULES
import React from "react";
import { Link } from "react-router-dom";
import i18n from '../../i18n';
import { withTranslation } from 'react-i18next';

//    TAB_1
import RightArrowBlue from "../../svg/rightArrowBlue.svg";
// import TabIMG1 from "../../img/tabImg_1.jpg";
// import TabIMG2 from "../../img/tabImg_2.jpg";
// import TabIMG3 from "../../img/tabImg_3.jpg";

// const NewsMain = () => {
  class NewsMain extends React.Component {

    constructor(props) {
      super(props);
  
      this.state = {
        items: [],
        DataisLoaded: false,
        error: null
    };
    }
  
    componentDidMount() {
      this._mounted = true
      this.makeRemoteRequest();
    }
  
   
  
    componentWillUnmount() {
      this._mounted = false
    }
  
    makeRemoteRequest = () => {
  
      const url = `http://217.174.238.204:8888/api/v1/categories/2 + ?pgn=3`;
    
      if (this._mounted) {
        this.setState({ DataisLoaded: true });
      }
      setTimeout(() => {
    
        fetch(url, {
          method: 'GET',
         
        })
    
          .then(res => res.json())
          .then(res => {
            if (this._mounted) {
              this.setState({
                items: res.data[0].data,
                error: res.message || null,
                DataisLoaded: true,
              })
              console.log(res.data)
            }
           
          })
          .catch(error => {
            if (this._mounted) {
              this.setState({ error, DataisLoaded: false});
            }
          });
      }, 1500);
    };
  
    render() {

      const { t } = this.props;
  
    // const [pageIndex, setPageIndex] = useState(1);
  
    var {DataisLoaded, items} = this.state;
      if(!DataisLoaded){
        return <div>Loading ....</div>
      }else{


      return (
        <div className="news-tab">
          <div className="tab-header">
            <h4 className="tab-header-text" id="tab-header-text">
            {t('Новости')}
            </h4>
            <div className="tab-header-line"></div>
            <div className="tab-header-link">
              <Link to="/news">
                <span>{t('Все новости')}</span>
                <div>
                  <img src={RightArrowBlue} alt="RIGHTARROW" />
                </div>
              </Link>
            </div>
          </div>
          <div className="tab-wrapper">

            {items.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">
                      { i18n.language === 'en' &&
                          JSON.parse(item['translations'][0]['attribute_data']).title 
                      }
                      { i18n.language === 'ru' && 
                          item.title
                      } 
                      { i18n.language === 'tm' && 
                          JSON.parse(item['translations'][1]['attribute_data']).title 
                      }
                      </h2>
                      <div className="tab-header-link tab-link">

                        <Link to={`/news/${item.slug}`}> 
                          <span>{t('Подробнее')}</span>
                          <div>
                            <img src={RightArrowBlue} alt="RIGHTARROW" />
                          </div>
                        </Link>

                      </div>
                    </div>
                  </div>

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

// export default NewsMain;
export default withTranslation()(NewsMain);
