taro/src/features/trackTimeDuration/components/TitleView.tsx

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';
import { useEffect, useState } from 'react';

let useNavigation;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
}


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

    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }


    useEffect(() => {
        setCount(count + 1)
    }, [global.isDebug])



    function more() {
        if (props.onClick) {
            props.onClick()
            return
        }
        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', 'SetSchedule', navigation)
                    break;
                case 0:
                    if (time.status != 'WAIT_FOR_START') {
                        Taro.showToast({
                            title: t('feature.common.toast.ongoing'),
                            icon: 'none'
                        })
                        return;
                    }
                    jumpPage('/pages/clock/ChooseScenario', 'ChooseScenario', navigation)
                    break;
            }
        })
            .catch(err => {
                console.log(err.errMsg)
            })
    }

    var showAddIcon = user.isLogin && props.showAddBtn

    return <View className={(props.children || props.subTitle) ? 'title_view' : 'title_view no_sub_element'}
        style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
        <View className='title_bg'>
            <Text className='title' style={{
                color: props.titleColor ? props.titleColor : '#fff',
                fontSize: props.titleSize?props.titleSize:(props.secondPage ? 28 : 36)
            }}>{props.title}</Text>
            {
                showAddIcon ? <View className='iconAddBg' onClick={more}>
                    <Image src={require('@/assets/images/add.png')} className='iconAdd' />
                </View> : <View className='iconAddBg' style={{ opacity: 0 }}>
                    <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>
}