import { View, Image, Text, Switch } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import './post_result.scss'
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import { rpxToPx } from "@/utils/tools";
import NewButton, { NewButtonType } from "../base/new_button";
import { IconActive, IconCheck, IconNotification, IconNotificationOff, IconSit } from "@/components/basic/Icons";
import { MainColorType } from "@/context/themes/color";
import { useState } from "react";
import dayjs from "dayjs";
import { useDispatch, useSelector } from "react-redux";
import { setMode, setShowActionTip } from "@/store/health";
import NewModal from "../base/new_modal";
import Card from "../components/card";
import { updateReminder } from "@/services/health";
import StatusIndicator, { StatusType } from "../base/status_indicator";
import { useTranslation } from "react-i18next";

let useRoute;
let useNavigation;
if (process.env.TARO_ENV == 'rn') {
    useRoute = require("@react-navigation/native").useRoute
    useNavigation = require("@react-navigation/native").useNavigation
}
export default function PostResult() {
    const user = useSelector((state: any) => state.user);

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

    if (process.env.TARO_ENV == 'rn') {
        router = useRoute()
    }
    else {
        router = useRouter()
    }

    const [data, setData] = useState(JSON.parse(router.params.data))
    const [showSetting, setShowSetting] = useState(false)
    const dispatch = useDispatch()
    const { t } = useTranslation()

    function getMainColor() {
        if (data.scenario == 'MOVE' && data.extra.move_status == 'SEDENTARY') {
            return MainColorType.g02
        }
        return getThemeColor(data.window ? data.window : 'FAST')
    }

    function nextTitle() {
        return data.next.content
    }

    function showSwitchBtn() {
        if (data.extra && data.extra.fast_type == 'LF') return false;
        return data.schedule_completed
    }

    function changeReminder(e) {
        updateReminder({ reminder: e.detail.value }, data.next.schedule_id).then((res) => {
            var detail = JSON.parse(JSON.stringify(data))
            detail.next.reminder = e.detail.value
            setData(detail)
        })
    }

    function swithBtnText() {
        switch (data.window) {
            case 'FAST':
                return 'Switch to Eat'
            case 'EAT':
                return 'Switch to Fast'
            case 'ACTIVE':
                return 'Switch to Sleep'
            case 'SLEEP':
                return 'Swtich to Active'
        }
        return ''
    }

    function tapSwitch() {
        switch (data.window) {
            case 'FAST':
                dispatch(setMode('EAT'))
                break
            case 'EAT':
                dispatch(setMode('FAST'))
                break
            case 'ACTIVE':
                dispatch(setMode('SLEEP'))
                break
            case 'SLEEP':
                dispatch(setMode('ACTIVE'))
                break
        }
        Taro.navigateBack()
    }

    function headerIcon() {
        if (data.current_window) {
            return <View style={{
                width: rpxToPx(128), height: rpxToPx(128), 
                borderRadius: rpxToPx(64),
                borderWidth: rpxToPx(4),
                boxSizing:'border-box',
                borderColor: getThemeColor(data.current_window),
                borderStyle: 'solid',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Image src={user.avatar} mode="aspectFill" style={{
                    background: user.isLogin ? 'transparent' : '#fff',
                    width: rpxToPx(108),
                    height: rpxToPx(108),
                    borderRadius:rpxToPx(54)
                }} />
            </View>
        }
        if (data.images && data.images.length > 0) {
            return <View className="result_icon_bg">
                <Image className="result_icon_bg" mode="aspectFill" src={data.images[0]} />
                <View className="result_icon_small" style={{ backgroundColor: getMainColor() }}>
                    <IconCheck color="#fff" width={rpxToPx(32)} height={rpxToPx(32)} />
                </View>
            </View>
        }

        if (data.scenario == 'MOVE') {
            return data.extra.move_status == 'ACTIVE' ?<IconActive width={rpxToPx(128)} color={MainColorType.active}/>:<IconSit width={rpxToPx(128)} color={MainColorType.g02}/>
        }
        return <View className="result_icon_bg" style={{ backgroundColor: getMainColor() }}>
            <IconCheck color="#fff" width={rpxToPx(88)} height={rpxToPx(88)} />
        </View>
    }

    function headerDesc() {
        if (data.scenario == 'MOVE') {
            if (data.extra.move_status == 'SEDENTARY') {
                return 'Sedentary Hour'
            }
            else {
                return 'Active Hour'
            }
        }
        return data.description
    }

    function statusText() {
        switch (data.current_window) {
            case 'FAST':
                return t('health.guide_current_scenario', { scenario: t('health.fast') })
            case 'EAT':
                return t('health.guide_current_scenario', { scenario: t('health.eat') })
            case 'SLEEP':
                return t('health.guide_current_scenario', { scenario: t('health.sleep') })
            case 'ACTIVE':
                return t('health.guide_current_scenario', { scenario: t('health.active') })
        }
        return ''
    }

    return <View className="post_result_container">
        {
            headerIcon()
        }

        <View className="h50 bold" style={{ color: data.current_window ? '#000' : getMainColor(), marginTop: rpxToPx(30) }}>{data.title}</View>
        <View className="h30" style={{ marginTop: rpxToPx(12) }}>{headerDesc()}</View>
        {
            data.next && <View className="result_next">
                <View className="result_top_line" />
                <View className="next_target">
                    <NewButton
                        type={NewButtonType.link}
                        title={nextTitle()}
                        onClick={() => {
                            setShowSetting(true)
                        }}
                    >
                        <View style={{marginRight:rpxToPx(8)}}>
                        {
                            data.next.reminder ? <IconNotification color={MainColorType.link} width={rpxToPx(26)} /> :
                                <IconNotificationOff color={MainColorType.link} width={rpxToPx(26)} />
                        }
                        </View>

                    </NewButton>
                </View>
            </View>
        }
        {
            data.current_window && <View className="result_next" style={{ alignItems: 'center' }}>
                <View className="result_top_line" />
                <StatusIndicator
                    text={statusText()}
                    type={StatusType.normal}
                    color={getThemeColor(data.current_window)}
                    fontColor={MainColorType.g01} />
            </View>

        }

        <View style={{ flex: 1 }} />
        <View className="result_footer">
            <NewButton
                type={NewButtonType.gray}
                width={rpxToPx(400)}
                height={rpxToPx(96)}
                title="Done"
                bold
                onClick={() => {
                    if (data.current_window) {
                        Taro.navigateBack({
                            delta: 7
                        })
                    }
                    else {
                        Taro.navigateBack()
                    }

                    if (data.status_change){
                        if (data.status_change.previous != data.status_change.current) {
                            //灵动岛弹窗
                            dispatch(setShowActionTip({
                                isShow: true,
                                isCompleted: false
                            }))
                        }
                    }

                }}
            />
            {
                showSwitchBtn() && <View style={{ marginTop: rpxToPx(36), width: rpxToPx(400), height: rpxToPx(72), display: 'flex' }}>
                    <NewButton
                        type={NewButtonType.link}
                        title={swithBtnText()}
                        onClick={tapSwitch}
                    />
                </View>
            }


        </View>
        {
            showSetting && <NewModal
                themeColor={getThemeColor(data.window)}
                title='开启提醒'
                dismiss={() => setShowSetting(false)}
                confirm={() => setShowSetting(false)}
            >

                <Card>
                    <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingRight: rpxToPx(40) }}>
                        <View className="setting_item" style={{ flex: 1 }}>
                            <View style={{ flex: 1 }}>
                                <View className="h24" style={{ color: MainColorType.g01 }}>{data.next.time}</View>
                                <View className="h34">{data.next.title}</View>
                            </View>

                        </View>
                        <Switch color={getThemeColor(data.window)} checked={data.next.reminder} onChange={changeReminder} />
                    </View>
                </Card>
            </NewModal>
        }
    </View>
}