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

//    TAB_2
import RightArrow_2 from "../../svg/rightArrow_2.svg";
// import SecondTabIMG_1 from "../../img/tabImgSecond_1.jpg";
// import SecondTabIMG_2 from "../../img/tabImgSecond_2.jpg";
// import SecondTabIMG_3 from "../../img/tabImgSecond_3.jpg";
// import SecondTabIMG_4 from "../../img/tabImgSecond_4.jpg";
// import SecondTabIMG_5 from "../../img/tabImgSecond_5.jpg";
// import SecondTabIMG_6 from "../../img/tabImgSecond_6.jpg";

// const DepartmentsMain = () => {
  class DepartmentsMain 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 = `https://etalon.gov.tm:8080/api/v1/categories/3 + ?pgn=6`;
    
      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="depts-tab">
          <div className="tab-header">
            <h4 className="tab-header-text" id="tab-header-text">
            {t('Отделы')}
            </h4>
            <div className="tab-header-line"></div> 
          </div>
          <div className="depts-wrapper">

          {items.map(item=>(
            <Link to={`/prices/department/${item.slug}`} className="dept" key={item.id}>
              <div className="dept-top">
                <div className="dept-absolute">
                  <img src={RightArrow_2} alt="ARROW" />
                </div>
                <div className="dept-img">
                  <img src={ item['featured_images'][0]['path'] } alt="MEASUREMENT" />
                </div>
              </div>
              <div className="dept-bottom">
                <h4>
                { 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 
                }
                </h4>
              </div>
            </Link>
          ))}

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

// export default DepartmentsMain;
export default withTranslation()(DepartmentsMain);
