// IMPORT MODULES
import React from "react";
import parse from 'html-react-parser';
import i18n from '../i18n';
import { withTranslation } from 'react-i18next';

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

// IMPORT IMAGES
// import Img from "../img/pricesImg_3-large.jpg";

// const Post = () => {
//   useEffect(() => {
//     window.scrollTo(0, 0);
//   }, []);

class Post extends React.Component {

    constructor(props) {
      super(props);
  
      this.state = {
        items: [],
        DataisLoaded: false,
        error: null
    };
    }
  
    componentDidMount() {
      this._mounted = true
      this.makeRemoteRequest();
    //   this.translate();
    // console.log(this.state.items);
    }
  
   
  
    componentWillUnmount() {
      this._mounted = false
    }
  
    makeRemoteRequest = () => {
  
      const url = `https://etalon.gov.tm:8080/api/v1/posts/`+this.props.match.params.slug;
    
      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,
                error: res.message || null,
                DataisLoaded: true,
              })
            //   console.log(this.state.items[0][0]['content_html'])
// 
            // let elem = document.querySelector('.calibrate-thermo-table structure-employees');
            // elem.innerHTML= this.state.items[0][0]['content_html'];
            // elem.innerHTML = 'salam';
            // console.log(elem);

            //     if(i18n.language == 'ru')
            // {
            //     elem.innerHTML= this.state.items['data'][0][0]['content'];
            //     this._isMounted = false;
            // }
            // else if(i18n.language == 'en')
            // {
            //     elem.innerHTML= JSON.parse(this.state.items['data'][0][0]['translations'][0]['attribute_data']).content;
            //     this._isMounted = false;
            // }
            // else
            // {
            //     elem.innerHTML= JSON.parse(this.state.items['data'][0][0]['translations'][1]['attribute_data']).content;
            //     this._isMounted = false;
            // }
// 
            }
           
          })
          .catch(error => {
            if (this._mounted) {
              this.setState({ error, DataisLoaded: false});
              // console.log(error);
            }
          });
      }, 1500);

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

    };

    // translate = () => {
    //     // console.log('salam');
    //     // let elem = document.querySelector('.calibrate-thermo-table structure-employees');
    //         // elem.innerHTML= this.state.items[0][0]['content'];
    //         console.log(this.state.items[0][0]['content'])
    // }
  
    render() {

        // console.log(this.state.items);
        // let elem = document.querySelector('.calibrate-thermo-table structure-employees');
        // console.log(elem);
  
    // const [pageIndex, setPageIndex] = useState(1);
  
    // let elem = document.querySelector('.calibrate-thermo-table structure-employees');
    // elem.innerHTML= this.state.items[0][0]['content'];
    const { t } = this.props;

    var {DataisLoaded, items} = this.state;
      if(!DataisLoaded){
        return <div>Loading ....</div>
      }else{
  
     
        
        return (
            <section className="calibrate-thermo">
            <Breadcrumb
                path_1={t('Стоимость')}
                // path_2="Стоимость калибровки термометров сопротивления в калибровки в аккредитованной области"
                link_1="/prices"
                currentUrl="/prices/calibrate_thermo"
            />
            <div className="container">

            {items.map(item=>(

                <div className="calibrate-thermo-inner" key={item[0]['id']}>
                <div className="tab-header">
                    {/* <h4 className="tab-header-text" id="tab-header-text">
                    Тарифы
                    </h4>
                    <div className="tab-header-line"></div> */}
                </div>
                <div className="calibrate-thermo-content">
                    <div className="novelty-head">
                    <div className="novelty-img">
                        <img src={item[0]['featured_images'][0]['path']} alt="Calibration" />
                    </div>
                    <h4 className="novelty-title">
                    { i18n.language === 'en' &&
                        JSON.parse(item[0]['translations'][0]['attribute_data']).title 
                    }
                    { i18n.language === 'ru' && 
                        item[0]['title']
                    } 
                    { i18n.language === 'tm' && 
                        JSON.parse(item[0]['translations'][1]['attribute_data']).title 
                    }
                    </h4>
                    </div>
                    <div className="calibrate-thermo-table structure-employees">

                    { i18n.language === 'en' &&
                        parse(JSON.parse(item[0]['translations'][0]['attribute_data']).content )
                    }
                    { i18n.language === 'ru' && 
                        parse(item[0]['content'])
                    } 
                    { i18n.language === 'tm' && 
                    parse(JSON.parse(item[0]['translations'][1]['attribute_data']).content )
                    }

                    {/* {
                        let elem = document.querySelector('.calibrate-thermo-table structure-employees');
                        console.log(elem);
                    } */}

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

            ))}

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

};

// export default Post;
export default withTranslation()(Post);
