taro/src/features/health/MainSwiper.tsx

import { View, Swiper, SwiperItem, Text } from "@tarojs/components";
import './MainCard.scss';
import MainDayNightCard from "./MainDayNightCard";
import MainFastEatCard from "./MainFastEatCard";
import MainSleepActiveCard from "./MainSleepActiveCard";
import { useEffect, useState } from "react";
import { WindowType } from "@/utils/types";
import { useDispatch, useSelector } from "react-redux";
import { setMode, setTab } from "@/store/health";
import { MainColorType } from "@/context/themes/color";
import { rpxToPx } from "@/utils/tools";
import dayjs from "dayjs";
import { useTranslation } from "react-i18next";


let scrollPage = 0;
let maxScale = 0.66
export default function MainSwiper(props: { count: number, pageChanged: Function, typeChanged: Function }) {
    const [current, setCurrent] = useState(1)
    const [type, setType] = useState(WindowType.day)
    const health = useSelector((state: any) => state.health);

    const [scale0, setScale0] = useState(1.0)
    const [scale1, setScale1] = useState(maxScale)
    const [scale2, setScale2] = useState(maxScale)

    const {t} = useTranslation()
    const dispatch = useDispatch()

    useEffect(()=>{
        dispatch(setTab(1))
    },[])

    function pageChanged(e) {
        const page = e.detail.current
        console.log(page)
        setCurrent(page)
        props.pageChanged(page)

        var strType = WindowType.day
        if (page == 0) {
            strType = WindowType.day
        }
        else if (page == 1) {
            strType = WindowType.fast
        }
        else {
            strType = WindowType.sleep
        }

        props.typeChanged(strType)
        dispatch(setTab(page % 3))
    }

    function typeChanged(e) {
        setType(e)
        props.typeChanged(e)
    }

    function onTransition(e) {
        let x = e.detail.dx

        let scale0 = 0
        let scale1 = 0
        let scale2 = 0

        const pageWidth = 143

        if (x >= -pageWidth && x <= pageWidth) {
            switch (scrollPage) {
                case 0:
                case 3:
                    {
                        scale0 = 1 - Math.abs(x) / pageWidth * 0.2
                        scale1 = x > 0 ? 1 - (pageWidth - x) / pageWidth * 0.2 : maxScale
                        scale2 = x < 0 ? 1 - (pageWidth + x) / pageWidth * 0.2 : maxScale
                    }
                    break;
                case 1:
                case 4:
                    {
                        scale0 = x < 0 ? 1 - (pageWidth + x) / pageWidth * 0.2 : maxScale
                        scale1 = 1 - Math.abs(x) / pageWidth * 0.2
                        scale2 = x > 0 ? 1 - (pageWidth - x) / pageWidth * 0.2 : maxScale
                    }
                    break;
                case 2:
                case 5:
                    {
                        scale0 = x > 0 ? 1 - (pageWidth - x) / pageWidth * 0.2 : maxScale
                        scale1 = x < 0 ? 1 - (pageWidth + x) / pageWidth * 0.2 : maxScale
                        scale2 = 1 - Math.abs(x) / pageWidth * 0.2
                    }
                    break;
            }
        }
        else if (x >= -pageWidth * 2 && x <= pageWidth * 2) {
            switch (scrollPage) {
                case 0:
                case 3:
                    {
                        scale1 = 1 - (Math.abs(x) - pageWidth) / pageWidth * 0.2
                        scale2 = x > 0 ? 1 - (pageWidth - x + pageWidth) / pageWidth * 0.2 : maxScale
                        scale0 = x < 0 ? 1 - (pageWidth + x + pageWidth) / pageWidth * 0.2 : maxScale
                    }
                    break;
                case 1:
                case 4:
                    {
                        scale1 = x < 0 ? 1 - (pageWidth + x + pageWidth) / pageWidth * 0.2 : maxScale
                        scale2 = 1 - (Math.abs(x) - pageWidth) / pageWidth * 0.2
                        scale0 = x > 0 ? 1 - (pageWidth - x + pageWidth) / pageWidth * 0.2 : maxScale
                    }
                    break;
                case 2:
                case 5:
                    {
                        scale1 = x > 0 ? 1 - (pageWidth - x + pageWidth) / pageWidth * 0.2 : maxScale
                        scale2 = x < 0 ? 1 - (pageWidth + x + pageWidth) / pageWidth * 0.2 : maxScale
                        scale0 = 1 - (Math.abs(x) - pageWidth) / pageWidth * 0.2
                    }
                    break;
            }
        }
        else if (x >= -pageWidth * 3 && x <= pageWidth * 3) {
            switch (scrollPage) {
                case 0:
                case 3:
                    {
                        scale2 = 1 - (Math.abs(x) - pageWidth * 2) / pageWidth * 0.2
                        scale0 = x > 0 ? 1 - (pageWidth - x + pageWidth * 2) / pageWidth * 0.2 : maxScale
                        scale1 = x < 0 ? 1 - (pageWidth + x + pageWidth * 2) / pageWidth * 0.2 : maxScale
                    }
                    break;
                case 1:
                case 4:
                    {
                        scale2 = x < 0 ? 1 - (pageWidth + x + pageWidth * 2) / pageWidth * 0.2 : maxScale
                        scale0 = 1 - (Math.abs(x) - pageWidth * 2) / pageWidth * 0.2
                        scale1 = x > 0 ? 1 - (pageWidth - x + pageWidth * 2) / pageWidth * 0.2 : maxScale
                    }
                    break;
                case 2:
                case 5:
                    {
                        scale2 = x > 0 ? 1 - (pageWidth - x + pageWidth * 2) / pageWidth * 0.2 : maxScale
                        scale0 = x < 0 ? 1 - (pageWidth + x + pageWidth * 2) / pageWidth * 0.2 : maxScale
                        scale1 = 1 - (Math.abs(x) - pageWidth * 2) / pageWidth * 0.2
                    }
                    break;
            }
        }

        setScale0(scale0)
        setScale1(scale1)
        setScale2(scale2)

    }

    function onTransitionend() {
        scrollPage = current
    }

    function switchMode() {
        switch (health.mode) {
            case 'FAST':
                dispatch(setMode('EAT'));
                break
            case 'EAT':
                dispatch(setMode('FAST'));
                break
            case 'DAY':
                dispatch(setMode('NIGHT'));
                break
            case 'NIGHT':
                dispatch(setMode('DAY'));
                break
            case 'SLEEP':
                dispatch(setMode('ACTIVE'));
                break
            case 'ACTIVE':
                dispatch(setMode('SLEEP'));
                break

        }
    }

    return <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center' }}>
        <Text className="today">{t('health.today')}</Text>
        <Text className="main_date">{global.language == 'en' ? dayjs().format('dddd, MMM D') : dayjs().format('MMMD日, dddd')}</Text>
        {/* <View className="tabs">
            <View className="tab_item" style={{ backgroundColor: current != 0 ? '#B2B2B2' : isDay() ? MainColorType.day : MainColorType.night }} onClick={() => tapScroll(0)}></View>
            <View style={{ width: rpxToPx(40) }} />
            <View className="tab_item" style={{ backgroundColor: current != 1 ? '#B2B2B2' : isFast() ? MainColorType.fast : MainColorType.eat }} onClick={() => tapScroll(1)}></View>
            <View style={{ width: rpxToPx(40) }} />
            <View className="tab_item" style={{ backgroundColor: current != 2 ? '#B2B2B2' : isSleep() ? MainColorType.sleep : MainColorType.active }} onClick={() => tapScroll(2)}></View>
        </View> */}
        <Swiper
            onTransition={onTransition}
            onAnimationFinish={onTransitionend}
            style={{ height: 110, width: rpxToPx(634) }} circular
            previousMargin={rpxToPx(634/3)}
            nextMargin={rpxToPx(634/3)}
            onChange={pageChanged}
            current={current}>
            <SwiperItem>
                <MainDayNightCard scale={current == 0 ? 1 : maxScale} count={props.count} typeChanged={typeChanged} id={1} onClick={() => {

                    if (current == 0) {
                        switchMode()
                    }
                    else {
                        setCurrent(0)
                    }
                }} />
            </SwiperItem>
            <SwiperItem>
                <MainFastEatCard scale={current == 1 ? 1 : maxScale} count={props.count} typeChanged={typeChanged} id={2} onClick={() => {
                    if (current == 1) {
                        switchMode()
                    }
                    else {
                        setCurrent(1)
                    }
                }} />
            </SwiperItem>
            <SwiperItem>
                <MainSleepActiveCard scale={current == 2 ? 1 : maxScale} count={props.count} typeChanged={typeChanged} id={3} onClick={() => {
                    if (current == 2) {
                        switchMode()
                    }
                    else {
                        setCurrent(2)
                    }
                }} />
            </SwiperItem>
            {/* <SwiperItem>
                <MainDayNightCard scale={current==3?1:maxScale} count={props.count} typeChanged={typeChanged} id={7} onClick={() => {
                    setCurrent(3)
                }} />
            </SwiperItem>
            <SwiperItem>
                <MainFastEatCard scale={current==4?1:maxScale} count={props.count} typeChanged={typeChanged} id={8} onClick={() => {
                    setCurrent(4)
                }} />
            </SwiperItem>
            <SwiperItem>
                <MainSleepActiveCard scale={current==5?1:maxScale} count={props.count} typeChanged={typeChanged} id={9} onClick={() => {
                    setCurrent(5)
                }} />
            </SwiperItem> */}
        </Swiper>

        {/* <View style={{flexDirection:'row',display:'flex'}}>
            <View style={{backgroundColor:current==0?'#f0f0f0':'#fff'}} onClick={()=>setCurrent(0)}>
                <MainDayNightCard count={props.count} typeChanged={typeChanged} id={4}/>
            </View>
            <View style={{backgroundColor:current==1?'#f0f0f0':'#fff'}} onClick={()=>setCurrent(1)}>
                <MainFastEatCard count={props.count} typeChanged={typeChanged} id={5}/>
            </View>
            <View style={{backgroundColor:current==2?'#f0f0f0':'#fff'}} onClick={()=>setCurrent(2)}>
                <MainSleepActiveCard count={props.count} typeChanged={typeChanged} id={6}/>
            </View>
        </View> */}
    </View>
}