import { View, Image } from "@tarojs/components";
import minus from '../../assets/svg/minus.svg'
import plus from '../../assets/svg/plus.svg'
import './Stepper.scss'
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { IconMinus, IconPlus } from "../basic/Icons";
import { useTranslation } from "react-i18next";

export default function Component(props: { child: any, minus: Function, plus: Function, disableMinus?: boolean, disablePlus?: boolean,themeColor:string }) {
    const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
    const {t} = useTranslation()
    useEffect(()=>{
        if(props.disableMinus){
            timer && clearInterval(timer);
        }
        if(props.disablePlus){
            timer && clearInterval(timer);

        }
    },[props.disableMinus,props.disablePlus])


    function tapMinus(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        if (props.disableMinus) {
            Taro.showToast({
                icon: 'none',
                title: t('feature.common.toast.min_value')
            })
            return;
        }
        props.minus();
    }

    function tapPlus(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        if (props.disablePlus){
            Taro.showToast({
                icon: 'none',
                title: t('feature.common.toast.max_value')
            })
            return;
        }
        props.plus();
    }
    function longMinus() {
        const newTimer = setInterval(() => {
            props.minus();
        },200);
        setTimer(newTimer)
    }

    function longPlus() {
        const newTimer = setInterval(() => {
            props.plus();
        },200);
        setTimer(newTimer)
    }

    function longMinusEnd(){
        if (timer)
            clearInterval(timer);
        setTimer(null);
    }

    function longPlusEnd(){
        if (timer)
            clearInterval(timer);
        setTimer(null);
    }
    return <View className="stepper_bg">
        <View className="stepper_item stepper_item_padding_right" onClick={tapMinus} onLongPress={longMinus} onTouchEnd={longMinusEnd}>
            <IconMinus color={props.themeColor} disable={props.disableMinus}/>
            {/* <Image src={minus} className="stepper_icon" style={{opacity:props.disableMinus?0.2:1}}/> */}
        </View>

        {
            props.child
        }
        <View className="stepper_item stepper_item_padding_left" onClick={tapPlus} onLongPress={longPlus} onTouchEnd={longPlusEnd}>
            <IconPlus color={props.themeColor} disable={props.disablePlus}/>
            {/* <Image src={plus} className="stepper_icon"  style={{opacity:props.disablePlus?0.2:1}}/> */}
        </View>

    </View>
}