import { View, Text } from '@tarojs/components'
import './TimelineStage.scss'
import { useState } from 'react';
import Segment from '@/components/navigation/Segment';
import TimelineFastSleep from './TimelineFastSleep';
import Stage from './Stage';
import { useTranslation } from 'react-i18next';
import Switch from '@/components/input/Switch';
import { useSelector } from 'react-redux';
import Taro from '@tarojs/taro';
import { jumpPage } from '../hooks/Common';
import { rpxToPx } from '@/utils/tools';


export default function Component(props: { data: any, title?: string, subTitle?: string, isSchedule?: boolean,first_real_check_time?:number }) {
    // debugger
    const [segmentIndex, setSegmentIndex] = useState(0)
    const permission = useSelector((state: any) => state.permission);
    const common = useSelector((state: any) => state.common);
    const { t } = useTranslation()

    function followWxPub() {
        const resource = common.resources.filter((item: any) => {
            return item.code == 'follow_wx_pub'
        })

        const title = permission.wxPubFollow ?t('feature.track_time_duration.follow_wx_pub.h5_followed_title'):
        t('feature.track_time_duration.follow_wx_pub.h5_unfollowed_title')

        Taro.showModal({
            title: permission.wxPubFollow ? t('feature.track_time_duration.follow_wx_pub.modal_followed_title') :
                t('feature.track_time_duration.follow_wx_pub.modal_unfollowed_title'),
            content: permission.wxPubFollow ? t('feature.track_time_duration.follow_wx_pub.modal_followed_content') :
                t('feature.track_time_duration.follow_wx_pub.modal_unfollowed_content'),
            showCancel: true,
            cancelText: permission.wxPubFollow ? t('feature.track_time_duration.follow_wx_pub.modal_followed_cancel_btn') :
                t('feature.track_time_duration.follow_wx_pub.modal_unfollowed_cancel_btn'),
            confirmText: permission.wxPubFollow ? t('feature.track_time_duration.follow_wx_pub.modal_followed_confirm_btn') :
                t('feature.track_time_duration.follow_wx_pub.modal_unfollowed_confirm_btn'),
            success(result) {
                if (result.confirm) {
                    global.forceRefreshWXPub = true
                    jumpPage('/pages/common/H5?title=' + title + '&url=' + resource[0].url)
                }
            },
        })
    }

    return <View style={{ display: 'flex', flexDirection: 'column', width: rpxToPx(578) }}>
        {/* <Text className='box_title'>{props.title ? props.title : 'Title'}</Text> */}
        <View className="box_header" style={{ backgroundColor: global.isDebug ? 'pink' : 'transparent' }}>
            <Text className="box_title" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>{props.title ? props.title : 'Title'}</Text>
            {
                props.isSchedule &&
                <Switch isOn={permission.wxPubFollow} onClick={() => followWxPub()} />
            }
        </View>
        <Text className='box_subtitle'>{props.subTitle ? props.subTitle : 'subTitle'}</Text>
        <View className="segment_detail" style={{
            display: 'flex', alignItems: 'center',
            flexDirection: 'column', justifyContent: 'center'
        }}>
            <View style={{
                position: 'relative', width: '100%', display: 'flex', alignItems: 'center',
                flexDirection: 'column', justifyContent: 'center'
            }}>
                {/* <View style={{ backgroundColor: 'pink' }}>
                    {
                        segmentIndex == 0 ? <TimelineFastSleep data={props.data} /> : <Stage data={props.data} />
                    }
                </View> */}

                <View style={{ position: 'relative' }}>
                    <View style={{ opacity: segmentIndex == 0 ? 1 : 0 }}>
                        <TimelineFastSleep data={props.data} first_real_check_time={props.first_real_check_time}/>
                    </View>
                    {props.data.scenario == 'FAST_SLEEP' && <View style={{
                        opacity: segmentIndex == 1 ? 1 : 0,
                        position: 'absolute', left: 0, top: 0, right: 0, bottom: 0,
                    }}>
                        <Stage data={props.data} />
                    </View>}
                </View>


                {/* <View style={{ opacity: segmentIndex == 0 ? 1 : 0 }}>
                    <TimelineFastSleep data={props.data} />
                </View>
                {
                    props.data.scenario == 'FAST_SLEEP' && <View style={{
                        position: 'absolute', left: 0, top: 0, right: 0, bottom: 0,
                        opacity: segmentIndex == 1 ? 1 : 0
                    }}>
                        <Stage data={props.data} />
                    </View>
                } */}

            </View>
        </View>
        {
            props.data.scenario == 'FAST_SLEEP' &&
            <View style={{ marginBottom: 0 }}>
                <Segment titles={[props.isSchedule ? t('feature.track_time_duration.schedule.timeline') :
                    t('feature.track_time_duration.record_fast_sleep.timeline'),
                t('feature.track_time_duration.schedule.stage')]} changed={(e) => {
                    setSegmentIndex(e);
                    global.segmentIndex = e
                }} />
            </View>
        }
    </View>
}