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

// IMPORT COMPONENTS
import Breadcrumb from "../components/Global/Breadcrumb";

//    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";
import PrevButton from "../svg/buttonPrev.svg";
import NextButton from "../svg/buttonNext.svg";

// const News = () => {
//   useEffect(() => {
//     window.scrollTo(0, 0);
//   }, []);
  // STATE
class News extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      items: [],
      DataisLoaded: false,
      error: null,
      tablePage: 0
  };
  }

  componentDidMount() {
    this._mounted = true
    this.makeRemoteRequest(true);
  }

 

  componentWillUnmount() {
    this._mounted = false
  }

  makeRemoteRequest = (query) => {

    if(query){
      this.setState({tablePage: this.state.tablePage + 1})
      }
    else if(this.state.tablePage > 1){
      this.setState({tablePage: this.state.tablePage - 1})
    }

    const url = `https://etalon.gov.tm:8080/api/v1/categories/2?pgn=6&`;
  
    if (this._mounted) {
      this.setState({ DataisLoaded: true });
    }
    setTimeout(() => {
  
      fetch(url + 'page=' + this.state.tablePage, {
        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[0]['data'][0])
            // console.log(this.state.items)
          }
         
        })
        .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{

      // console.log(this.state.items);
      

      return (
        <section className="news">
          <Breadcrumb path_1={t('Новости_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">
                  {t('Новости_1')}
                  </h4>
                  <div className="tab-header-line"></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">
                        {/* {format(item.published_at,'YYYY-MM-DD')} */}
                      {format(parseISO(item.published_at), "dd.MM.yyy")}
                      </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>
            </div>

            <div className="news-page-control">
              <button
                className="prev-button"
                type="button"
                onClick={() => {this.makeRemoteRequest(false)}}
              >
                <img src={PrevButton} alt="Back" />
              </button>
              <span className="page-index">{this.state.tablePage}</span>
              <button
                className="next-button"
                onClick={() => {this.makeRemoteRequest(true)}}
              >
                <img src={NextButton} alt="Forward" />
              </button>
            </div>

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

// export default News;
export default withTranslation()(News);
