import { View, Text, Image } from '@tarojs/components'
import './TitleView.scss'
import { useDispatch, useSelector } from 'react-redux';
import Taro from '@tarojs/taro';
import { setStep } from '@/store/scenario';
import { useTranslation } from 'react-i18next';
import { jumpPage } from '../hooks/Common';

export default function Component(props: {
    children?: any,
    subTitle?: string,
    title: string, titleColor?: string,
    secondPage?: boolean,
    showAddBtn?: boolean
}) {
    const time = useSelector((state: any) => state.time);
    const user = useSelector((state: any) => state.user);
    const { t } = useTranslation()
    const dispatch = useDispatch();
    const isFastFirst = true



    function more() {
        Taro.showActionSheet({
            itemList: [
                t('feature.track_time_duration.action_sheet.switch_scenario'),
                t('feature.track_time_duration.action_sheet.change_schedule')
            ]
        }).then(res => {
            switch (res.tapIndex) {
                case 1:
                    if (time.status != 'WAIT_FOR_START') {
                        Taro.showToast({
                            title: t('feature.common.toast.ongoing'),
                            icon: 'none'
                        })
                        return;
                    }
                    if (time.scenario == 'FAST_SLEEP') {
                        dispatch(setStep(isFastFirst ? 'fast' : 'sleep'))
                    }
                    else if (time.scenario == 'SLEEP') {
                        dispatch(setStep('sleep'))
                    }
                    else {
                        dispatch(setStep('fast'))
                    }
                    jumpPage('/pages/clock/SetSchedule')
                    break;
                case 0:
                    if (time.status != 'WAIT_FOR_START') {
                        Taro.showToast({
                            title: t('feature.common.toast.ongoing'),
                            icon: 'none'
                        })
                        return;
                    }
                    jumpPage('/pages/clock/ChooseScenario')
                    break;
            }
        })
            .catch(err => {
                console.log(err.errMsg)
            })
    }

    return <View className='title_view'>
        <View className='title_bg'>
            <Text className='title' style={{
                color: props.titleColor ? props.titleColor : '#fff',
                fontSize: props.secondPage ? 28 : 36
            }}>{props.title}</Text>
            {
                user.isLogin && props.showAddBtn && <View className='iconAddBg' onClick={more}><Image src={require('@/assets/images/add.png')} className='iconAdd' /></View>
            }
        </View>
        {
            props.children ? props.children : <View />
        }
        {
            props.subTitle && <Text className='subTitle'>{props.subTitle}</Text>
        }

    </View>
}