import Taro, { useRouter } from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import "./index.scss";
import { AtButton } from "taro-ui";
import React, { useEffect, useState } from "react";
import "animate.css";

import code from "../../images/code.svg";
import laptop from "../../images/laptop.svg";
import travel from "../../images/travel.svg";
import dgnomad from "../../images/dgnomad.png";
import tiktok from "../../images/tiktok.png";
import youtube from "../../images/youtube.png";
import web from "../../images/web.png";

const Index = () => {
  const [vipbook, setVipbook] = useState(false);
  const router = useRouter();

  useEffect(() => {
    setVipbook(router?.params?.type === "vipbook");
  }, [router.params]);

  const goRead = () => {
    const paramsStr = router.params
      ? "?" + new URLSearchParams(router.params).toString()
      : "";
    Taro.navigateTo({ url: `/pages/book/index${paramsStr}` });
  };

  return (
    <View className="index">
      <View className="index-book animate__animated animate__pulse">
        <View className="index_book_left">
          <View className="left_title">《数字游民:地理套利与自动化》</View>
          <View className="left_subtitle">边旅行边赚钱 · 杠杆主义 · 地理套利</View>

          <View className="card">
            <View className="cardItem">
              <View className="cardItem_left">
                <Image className="cardItem_left_img" src={tiktok} lazyLoad />
              </View>
              <View className="cardItem_right">
                <View className="cardItem_rightUp">Tiktok</View>
                <View className="cardItem_rightDown">无人直播</View>
              </View>
            </View>
            <View className="cardItem">
              <View className="cardItem_left">
                <Image className="cardItem_left_img" src={youtube} lazyLoad />
              </View>
              <View className="cardItem_right">
                <View className="cardItem_rightUp">Youtube</View>
                <View className="cardItem_rightDown">自媒体</View>
              </View>
            </View>
            <View className="cardItem">
              <View className="cardItem_left">
                <Image className="cardItem_left_img" src={web} lazyLoad />
              </View>
              <View className="cardItem_right">
                <View className="cardItem_rightUp">Web</View>
                <View className="cardItem_rightDown">SaaS + Web3</View>
              </View>
            </View>
          </View>

          <View className="left_btn">
            <AtButton
              onClick={goRead}
              className="startRead"
              type="primary"
              size="small"
              circle
            >
              开始阅读
            </AtButton>
          </View>
        </View>

        <View className="index_book_img">
          <Image
            className="book_img"
            src={dgnomad}
            fetchpriority="high"
            decoding="async"
            lazyLoad={false}
            alt="数字游民封面"
          />
        </View>
      </View>

      <View className="svgItems">
        <View className="svgItem">
          <View className="bookImg">
            <Image src={laptop} lazyLoad />
            <View className="bookImg_text">Tiktok无人直播</View>
          </View>
          <View className="bookImg">
            <Image src={travel} lazyLoad />
            <View className="bookImg_text">Youtube自媒体</View>
          </View>
          <View className="bookImg">
            <Image src={code} lazyLoad />
            <View className="bookImg_text">Web: SaaS + Web3</View>
          </View>
        </View>
      </View>
    </View>
  );
};

export default Index;
