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

// SEARCH
import { tableSearch } from "../helpers/TableSearch";

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

// IMPORT IMAGES
import Loop from "../svg/loupe.svg";
class Regulations extends React.Component {
  constructor(props) {
    super(props);
    this.tableRef = React.createRef;

    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/reestr_doc`;

    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)
          }
        })
        .catch((error) => {
          if (this._mounted) {
            this.setState({ error, DataisLoaded: false });
          }
        });
    }, 1500);
  };

  render() {
    const { t } = this.props;
    var number = 1;

    var { DataisLoaded, items } = this.state;
    if (!DataisLoaded) {
      return <div>Loading ....</div>;
    } else {
      return (
        <section className="regulations">
          <Breadcrumb
            path_1={t("Реестр нормативной документации")}
            currentUrl="/measuring_regulations"
          />
          <div className="container">
            <div className="regulations-inner">
              <div className="regulations-head">
                <div className="regulations-head-left">
                  <form className="search-form">
                    <input
                      type="text"
                      placeholder="Поиск"
                      onChange={(e) => {
                        const input = e.target.value;
                        tableSearch(input, "tbody-search");
                      }}
                    />
                    <button type="button">
                      <div>
                        <img src={Loop} alt="Loop" />
                      </div>
                    </button>
                  </form>
                </div>
                {/* <div className="regulations-head-right">
                  <form className="btn-form">
                    <button type="button" className="button-prev regulations-btn">
                      <div>
                        <img src={Prev} alt="Previous" />
                      </div>
                    </button>
                    <button type="button" className="button-right regulations-btn">
                      <div>
                        <img src={Next} alt="Next" />
                      </div>
                    </button>
                  </form>
                </div> */}
              </div>
              <div className="regulations-content">
                <div className="structure-employees">
                  <table className="regulations-table structure-table">
                    <tbody className="tbody-search">
                      <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>
                        <th className="limit head">{t("Срок действия")}</th>
                        <th className="limit head">{t("Примечание")}</th>
                      </tr>

                      {items.map((item) => (
                        <tr key={item.id}>
                          <td>{number++}</td>
                          <td>
                            {i18n.language === "en" &&
                              parse(item.document_number)}
                            {i18n.language === "ru" &&
                              parse(item.document_number)}
                            {i18n.language === "tm" &&
                              parse(
                                JSON.parse(
                                  item["translations"][1]["attribute_data"]
                                ).document_number
                              )}
                          </td>
                          <td>
                            {i18n.language === "en" && parse(item.instead)}
                            {i18n.language === "ru" && parse(item.instead)}
                            {i18n.language === "tm" &&
                              parse(
                                JSON.parse(
                                  item["translations"][1]["attribute_data"]
                                ).instead
                              )}
                          </td>
                          <td>
                            {/* {parse(item.name_of_documentation)} */}
                            {i18n.language === "en" &&
                              parse(item.name_of_documentation)}
                            {i18n.language === "ru" &&
                              parse(item.name_of_documentation)}
                            {i18n.language === "tm" &&
                              parse(
                                JSON.parse(
                                  item["translations"][1]["attribute_data"]
                                ).name_of_documentation
                              )}
                          </td>
                          <td>{item.introduction_date}</td>
                          <td>{item.validity}</td>
                          <td>{item.note}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </section>
      );
    }
  }
}

// export default Regulations;
export default withTranslation()(Regulations);
