// IMPORT MODULES
import React  from "react";
import { withTranslation } from 'react-i18next'; 

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

// IMPORT IMAGES
// import Print from "../svg/print.svg";
// import Img1 from "../img/serviceRequest_1.jpg";
// import Img2 from "../img/serviceRequest_2.jpg";
// import Img3 from "../img/serviceRequest_3.jpg";
// import Img4 from "../img/serviceRequest_4.jpg";

// const Service = (props) => {
//   const {t} = props;
class Service 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/insfor_usluh`;
  
    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(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);

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

  // DEFINE IMAGE SOURCES
  // const img_1 = useRef();
  // const img_2 = useRef();
  // const img_3 = useRef();
  // const img_4 = useRef();

      return (
        <section className="service">
          <Breadcrumb path_1={t('Информация')} currentUrl="/service" />
          <div className="container">
            <div className="service-inner">
              <div className="tab-header">
                <h4 className="tab-header-text" id="tab-header-text">
                {t('Сведения об услугах проводимых Государственным эталонным центром')}
                </h4>
                <div className="tab-header-line"></div>
              </div>
              <div className="service-content">
                <div className="structure-employees">

                  <table className="regulations-table structure-table">
                    <tbody>
                      <tr className="table-head">
                        <th className="n head">№ пп</th>
                        <th className="number head">Вид деятельности</th>
                        <th className="replacedby head">
                          Документы необходимые для проведения работ
                        </th>
                        <th className="desc head">
                          Порядок, в соответствии с которым проводиться деятельность
                        </th>
                        <th className="date head">Стоимость работ</th>
                      </tr>

                      {items.map(item=>(
                      <tr key={item.id}>
                        <td>{item.kind_of_activity}</td>
                        <td>Калибровка средств измерений</td>
                        <td>
                          Заявка на проведение работ Техническая документация на
                          средство измерения Сертификат последней калибровки
                          средства измерения Документ об оплате
                        </td>
                        <td>
                          «Порядок проведения Государственных метрологических
                          испытаний, государственной поверки, калибровки и поверки
                          стандартных образцов средств измерений» Утвержденный
                          приказом Главной государственной службы
                          «Туркменстадартлары» № 1/148 от 5 ноября 2015 года
                        </td>
                        <td>
                          Тарифы проводимых работ по метрологии подразделениями
                          Главной государственной службы «Туркменстадартлары»
                          Утвержденные 15 марта 2018 года
                        </td>
                      </tr>
                      ))}

                    </tbody>
                  </table>

                </div>
              </div>
              {/* <div className="service-bottom">
                <div className="tab-header">
                  <h4 className="tab-header-text" id="tab-header-text">
                  {t('Виды заявок')}
                  </h4>
                  <div className="tab-header-line"></div>
                </div>
                <div className="service-cards-wrapper">
                  <div
                    className="service-card"
                    onClick={() => {
                      window.open(img_1.current.src);
                    }}
                  >
                    <div className="service-abs">
                      <div>
                        <img src={Print} alt="Print" />
                      </div>
                    </div>
                    <div className="service-card-top">
                      <div className="service-img-wrapper">
                        <img src={Img1} alt="Request1" ref={img_1} />
                      </div>
                    </div>
                    <div className="service-card-bottom">
                      <h4 className="service-card-title">Заявка на поверку</h4>
                    </div>
                  </div>
                  <div
                    className="service-card"
                    onClick={() => {
                      window.open(img_2.current.src);
                    }}
                  >
                    <div className="service-abs">
                      <div>
                        <img src={Print} alt="Print" />
                      </div>
                    </div>
                    <div className="service-card-top">
                      <div className="service-img-wrapper">
                        <img src={Img2} alt="Request2" ref={img_2} />
                      </div>
                    </div>
                    <div className="service-card-bottom">
                      <h4 className="service-card-title">Заявка на поверку</h4>
                    </div>
                  </div>
                  <div
                    className="service-card"
                    onClick={() => {
                      window.open(img_3.current.src);
                    }}
                  >
                    <div className="service-abs">
                      <div>
                        <img src={Print} alt="Print" />
                      </div>
                    </div>
                    <div className="service-card-top">
                      <div className="service-img-wrapper">
                        <img src={Img3} alt="Request3" ref={img_3} />
                      </div>
                    </div>
                    <div className="service-card-bottom">
                      <h4 className="service-card-title">Заявка на поверку</h4>
                    </div>
                  </div>
                  <div
                    className="service-card"
                    onClick={() => {
                      window.open(img_4.current.src);
                    }}
                  >
                    <div className="service-abs">
                      <div>
                        <img src={Print} alt="Print" />
                      </div>
                    </div>
                    <div className="service-card-top">
                      <div className="service-img-wrapper">
                        <img src={Img4} alt="Request4" ref={img_4} />
                      </div>
                    </div>
                    <div className="service-card-bottom">
                      <h4 className="service-card-title">Заявка на поверку</h4>
                    </div>
                  </div>
                </div>
              </div> */}
            </div>
          </div>
        </section>
      );
    }
  }
};

// export default Service;
export default withTranslation()(Service);

