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

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

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 = `https://etalon.gov.tm:8080/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">{t("№ пп")}</th>
                        <th className="number head">{t("Вид деятельности")}</th>
                        <th className="replacedby head">
                          {t("Документы необходимые для проведения работ")}
                        </th>
                        <th className="desc head">
                          {t(
                            "Порядок, в соответствии с которым проводиться деятельность"
                          )}
                        </th>
                        <th className="date head">{t("Стоимость работ")}</th>
                      </tr>

                      {items.map((item) => (
                        <tr key={item.id}>
                          <td>{item.id}</td>
                          <td>
                            {i18n.language === "en" &&
                              JSON.parse(
                                item["translations"][0]["attribute_data"]
                              ).kind_of_activity}
                            {i18n.language === "ru" && item.kind_of_activity}
                            {i18n.language === "tm" &&
                              JSON.parse(
                                item["translations"][1]["attribute_data"]
                              ).kind_of_activity}
                          </td>
                          <td>
                            {i18n.language === "en" &&
                              JSON.parse(
                                item["translations"][0]["attribute_data"]
                              ).documents_for_employers}
                            {i18n.language === "ru" &&
                              item.documents_for_employers}
                            {i18n.language === "tm" &&
                              JSON.parse(
                                item["translations"][1]["attribute_data"]
                              ).documents_for_employers}
                          </td>
                          <td>
                            {i18n.language === "en" &&
                              JSON.parse(
                                item["translations"][0]["attribute_data"]
                              ).order}
                            {i18n.language === "ru" && item.order}
                            {i18n.language === "tm" &&
                              JSON.parse(
                                item["translations"][1]["attribute_data"]
                              ).order}
                          </td>
                          <td>
                            {i18n.language === "en" &&
                              JSON.parse(
                                item["translations"][0]["attribute_data"]
                              ).cost_of_work}
                            {i18n.language === "ru" && item.cost_of_work}
                            {i18n.language === "tm" &&
                              JSON.parse(
                                item["translations"][1]["attribute_data"]
                              ).cost_of_work}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>

              <Service_bottom />

              {/* <div className="service-bottom">
                <div className="tab-header">
                  <h4 className="tab-header-text" id="tab-header-text">
                    Виды заявок
                  </h4>
                  <div className="tab-header-line"></div>
                </div>
                <div className="service-cards-wrapper">
                  <div
                    className="service-card"
                    onClick={() => {
                      window.open(Img1);
                    }}
                  >
                    <div className="service-abs">
                      <div>
                        <img src={Print} alt="Print" />
                      </div>
                    </div>
                    <div className="service-card-top">
                      <a href={Img1} download={Img1}>
                      <div className="service-img-wrapper">
                        <img src={Img1} alt="Request1" />
                      </div>
                      </a>
                    </div>
                    <div className="service-card-bottom">
                      <h4 className="service-card-title">Заявка на поверку</h4>
                    </div>
                  </div>
                  <div
                    className="service-card"
                    onClick={() => {
                      window.open(Img2);
                    }}
                  >
                    <div className="service-abs">
                      <div>
                        <img src={Print} alt="Print" />
                      </div>
                    </div>
                    <div className="service-card-top">
                      <a href={Img2} download={Img2}>
                        <div className="service-img-wrapper">
                          <img src={Img2} alt="Request2" />
                        </div>
                      </a>
                    </div>
                    <div className="service-card-bottom">
                      <h4 className="service-card-title">Заявка на поверку</h4>
                    </div>
                  </div>
                  <div
                    className="service-card"
                    onClick={() => {
                      window.open(Img3);
                    }}
                  >
                    <div className="service-abs">
                      <div>
                        <img src={Print} alt="Print" />
                      </div>
                    </div>
                    <div className="service-card-top">
                    <a href={Img3} download={Img3}>
                        <div className="service-img-wrapper">
                          <img src={Img3} alt="Request3" />
                        </div>
                    </a>
                    </div>
                    <div className="service-card-bottom">
                      <h4 className="service-card-title">Заявка на поверку</h4>
                    </div>
                  </div>
                  <div
                    className="service-card"
                    onClick={() => {
                      window.open(Img4);
                    }}
                  >
                    <div className="service-abs">
                      <div>
                        <img src={Print} alt="Print" />
                      </div>
                    </div>
                    <div className="service-card-top">
                    <a href={Img4} download={Img4}>
                        <div className="service-img-wrapper">
                          <img src={Img4} alt="Request4" />
                        </div>
                      </a>
                    </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);
