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

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

// IMPORT IMAGES
import Print from "../svg/print.svg";

class Service_bottom 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/wid_zayawok`;

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

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

    var { DataisLoaded, items } = this.state;
    if (!DataisLoaded) {
      return <div>Loading ....</div>;
    } else {
      return (
        <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">
            {items.map((item) => (
              <div className="service-card" key={item.id}>
                <div className="service-abs">
                  <div>
                    <img src={Print} alt="Print" />
                  </div>
                </div>
                <div className="service-card-top">
                  <a
                    href={item.image.path}
                    target="_blank"
                    rel="noreferrer noopener"
                    type="application/octet-stream"
                    onClick={(e) => {
                      const el = document.createElement("a");
                      el.setAttribute("href", item.file.path);
                      el.setAttribute("download", "");
                      el.onclick = (ev) => {
                        ev.stopPropagation();
                      };
                      el.click();
                    }}
                  >
                    <div className="service-img-wrapper">
                      <img src={item.image.path} alt="Request1" />
                    </div>
                  </a>
                </div>
                <div className="service-card-bottom">
                  <h4 className="service-card-title">
                    {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>
              </div>
            ))}
          </div>
        </div>
      );
    }
  }
}

export default withTranslation()(Service_bottom);
