import React, { useState, useContext, useEffect } from "react";
import { IonButton, IonContent } from "@ionic/react";
//import { arrowBack, arrowForward } from "ionicons/icons";
//import "../pages/Intro.css";
import "./Onboarding.css";

import { Context } from "../context/contex";

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, EffectFade, Autoplay } from "swiper/modules";
import logo from "/assets/logo/vinpace.png";
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/autoplay";
import "swiper/css/effect-fade";

//import 'swiper/swiper-bundle.css';

const OnboardSlider: React.FC = () => {
 const [lastSlide, setLastSlide] = useState<boolean>(false);
 const [slideContent, setSlideContent] = useState<any[]>([]);

 const context = useContext(Context);

 if (!context) {
  // Handle the case when context is null (for example, return a loading state or throw an error)
  return <div>Loading...</div>;
 }

 const { apiURL } = context;

 const getSlides = async () => {
  try {
   const response = await fetch(apiURL, {
    method: "POST",
    headers: {
     "Content-Type": "application/x-www-form-urlencoded",
    },
    body: new URLSearchParams({ action: "get_onboarding" }),
   });

   if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
   }

   const data = await response.json();
   if (data.error) {
    console.error("Error:", data.error);
   } else {
    const f = data.filter((p: any) => p.position == 1)
    setSlideContent(f);

    //   console.log("Fetched settings:", data);
   }
  } catch (error: any) {
   console.error("Error:", error?.message);
  }
 };

 useEffect(() => {
  getSlides();
  // console.log("LS", lastSlide);
 }, []);

 return (
<IonContent fullscreen className="onboardx-content">

  {slideContent && slideContent.length > 0 && (
    <Swiper
      modules={[Pagination, EffectFade, Autoplay]}
      effect="fade"
      fadeEffect={{ crossFade: true }}
      pagination={{ clickable: true }}
      slidesPerView={1}
        autoplay={{
    delay: 3000,
    disableOnInteraction: false,
  }}
      onReachEnd={() => setLastSlide(true)}
      className="onboardx-swiper"
    >
      {slideContent.map((card, index) => (
        <SwiperSlide key={`onboardx_${index}`}>
          <div
            className="onboardx-slide"
            style={{
              backgroundImage: `url(${card.image})`,
            }}
          >
            <div className="onboardx-overlay" />

            <div className="onboardx-text-wrap">
              <h2 className="onboardx-title">{card.title}</h2>
              <p className="onboardx-text">{card.text}</p>

                <div className="onboardx-actions">
                  <IonButton color="medium" expand="block" routerLink="/register">
                    Create Account
                  </IonButton>

                  <IonButton
                    expand="block"
                    fill="outline"
                    routerLink="/login"
                    
                  >
                    Sign In
                  </IonButton>
                </div>
            
            </div>
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  )}
</IonContent>

 );
};

export default OnboardSlider;