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

// IMPORT COMPONENTS
import NewsTab from "../components/Main/NewsTab";
import DepartmentsTab from "../components/Main/DepartmentsTab";
import SitesTab from "../components/Main/SitesTab";

// IMPORT SWIPER MODULES
import { Swiper, SwiperSlide } from "swiper/react/swiper-react";
import { Navigation, Pagination, A11y, Autoplay } from "swiper";

// IMPORT SWIPER STYLES
import "swiper/swiper.scss";

// IMPORT SLIDER IMAGES
// import SliderIMG from "../img/sliderImg.jpg";
import SliderIMG_2 from "../img/secondSliderImg_2.jpg";

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

class Main 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/slider`
  
    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)
          }
         
        })
        .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 (
        <section className="main">
          <div className="slider">
            <Swiper
              // install Swiper modules
              modules={[Navigation, Pagination, A11y, Autoplay]}
              autoplay={({ delay: 3000 }, { disableOnInteraction: false })} 
              spaceBetween={0}
              slidesPerView={1}
              navigation
              pagination={{ clickable: true }}
              loop={true}
            >


            {items.map(item=>(
              <SwiperSlide key={item.id} >
                <div className="slider-img" >
                  <img src={item.image.path} alt="ETALON" />
                </div>
              </SwiperSlide>
             ))}

            </Swiper>
          </div>
          <div className="container">
            <div className="main-inner">
              <NewsTab />
              <div className="second-slider">
                <div className="tab-header">
                  <h4 className="tab-header-text" id="tab-header-text">
                  {t('Объявления')}
                    {/* {t('test')} */}
                  </h4>
                  <div className="tab-header-line"></div>
                </div>
                <div className="slider">
                <a href="/state_etalon">
                  <Swiper
                    // install Swiper modules
                    // modules={[Navigation, Pagination, A11y, Autoplay]}
                    modules={[Navigation, Pagination, A11y, ]}
                    // autoplay={({ delay: 3000 }, { disableOnInteraction: false })}
                    spaceBetween={0}
                    slidesPerView={1}
                    // navigation
                    // pagination={{ clickable: true }}
                    loop={false}
                  >

                    <SwiperSlide className="swipe-slide" >
                      <h2>{t('Государственный эталонный центр')}</h2>
                      <div className="slider-img">
                        <img src={SliderIMG_2} alt="ETALON" />
                      </div>
                    </SwiperSlide>
                    
                    {/* <SwiperSlide className="swipe-slide">
                      <h2>{t('Государственный эталонный центр')}</h2>
                      <div className="slider-img">
                        <img src={SliderIMG_2} alt="ETALON" />
                      </div>
                    </SwiperSlide>
                    <SwiperSlide className="swipe-slide">
                      <h2>{t('Государственный эталонный центр')}</h2>
                      <div className="slider-img">
                        <img src={SliderIMG_2} alt="ETALON" />
                      </div>
                    </SwiperSlide> */}
                  </Swiper>
                  </a>
                </div>
              </div>
              <DepartmentsTab />
              <SitesTab />
            </div>
          </div>
        </section>
      );
    }
  }
};

// export default Main;
export default withTranslation()(Main);
