import React from "react";
import Link from "@docusaurus/Link";
import Translate, { translate } from "@docusaurus/Translate";
import { Swiper, SwiperSlide } from "swiper/react";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import useBaseUrl from "@docusaurus/useBaseUrl";
import Layout from "@theme/Layout";
import SwiperCore, {
  EffectFade,
  Navigation,
  Autoplay
} from 'swiper';

import clsx from "clsx";
import styles from "./index.module.css";
import Features from "../components/Features";
import Footer from "../components/Footer";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

function Home() {
  const {
    siteConfig: {
      customFields: { description },
      tagline,
    },
  } = useDocusaurusContext();
  return (
    <Layout title={tagline} description={description as string}>
      <main>
        <div className={styles.hero}>
          <div className="row" style={{ alignItems: "center" }}>
            <div className="col col--5  col--offset-1">
              <h1 className={styles.heroProjectTitle}>
                <img
                  src="/img/logo.svg"
                  className={styles.heroProjectLogo}
                ></img>
              </h1>
              <h3 className={styles.heroProjectTagline}>
                <span
                  className={styles.heroTitleTextHtml}
                  dangerouslySetInnerHTML={{
                    __html: translate({
                      id: "homepage.hero.title",
                      message:
                        "Java native API Gateway for <b> service proxy, protocol conversion and API governance.</b>",
                      description:
                        "Home page hero title, can contain simple html tags",
                    }),
                  }}
                />
              </h3>
              <div className={styles.indexCtas}>
                <Link className={styles.buttonGetStarted} to="/docs/index">
                  <Translate>Get Started</Translate>
                </Link>
                <Link
                  className={styles.buttonGithub}
                  to="https://github.com/apache/shenyu"
                >
                  <Translate>Github</Translate>
                </Link>
              </div>
            </div>
            <div className="col col--5 col--offset-1">
              <div className={styles.logoContainer}>
                <img
                  alt={translate({ message: "Docusaurus with Keytar" })}
                  className={styles.heroLogo}
                  src={useBaseUrl("/img/architecture/shenyu-architecture-3d.png")}
                />
              </div>
            </div>
          </div>
        </div>
        <div className={styles.sectionDashboard}>
          <Swiper
            modules={[Autoplay, EffectFade, Navigation]}
            watchSlidesProgress={true}
            navigation={{
              nextEl: '.user-swiper-button-next',
              prevEl: '.user-swiper-button-prev',
            }}
            grabCursor
            // 轮播下用这个效果会失效
            // effect={'fade'}
            // fadeEffect={{
            //   crossFade: true
            // }}
            // slidesPerView={1}
            // 自动轮播
            loop={true}
            speed={0}
            autoplay={{
                delay: 3000,
                disableOnInteraction: false,
                waitForTransition: false,
            }}
          >
            <SwiperSlide>
              <img
                className={styles.contentImg}
                src={useBaseUrl("/img/home/2_1.jpg")}
              />
            </SwiperSlide>
            <SwiperSlide>
              <img
                className={styles.contentImg}
                src={useBaseUrl("/img/home/2_2.jpg")}
              />
            </SwiperSlide>
            <SwiperSlide>
              <img
                className={styles.contentImg}
                src={useBaseUrl("/img/home/2_3.jpg")}
              />
            </SwiperSlide>
            <SwiperSlide>
              <img
                className={styles.contentImg}
                src={useBaseUrl("/img/home/2_4.jpg")}
              />
            </SwiperSlide>
            <SwiperSlide>
              <img
                className={styles.contentImg}
                src={useBaseUrl("/img/home/2_5.jpg")}
              />
            </SwiperSlide>
            <SwiperSlide>
              <img
                className={styles.contentImg}
                src={useBaseUrl("/img/home/2_6.jpg")}
              />
            </SwiperSlide>
            <SwiperSlide>
              <img
                className={styles.contentImg}
                src={useBaseUrl("/img/home/2_7.jpg")}
              />
            </SwiperSlide>
            <SwiperSlide>
              <img
                className={styles.contentImg}
                src={useBaseUrl("/img/home/2_8.jpg")}
              />
            </SwiperSlide>
          </Swiper>
        </div>
        <div className="swiper-button-prev user-swiper-button-prev" style={{ top:"880px", left: "50px", color:'#000033' }}></div>
        <div className="swiper-button-next user-swiper-button-next" style={{ top:"880px", right: "50px", color:'#000033' }}></div>
        <div className={clsx(styles.section, styles.sectionAlt)}>
          <div className="container">
            <Features />
          </div>
        </div>
        <div><Footer></Footer></div>
      </main>
    </Layout>
  );
}

export default Home;