import { View, Text, Switch, ScrollView } from "@tarojs/components";
import Metric from "@/features/trackSomething/components/Metric";
import { useDidShow, usePullDownRefresh, useShareAppMessage } from "@tarojs/taro";
import { useTranslation } from "react-i18next";
import Segment from '@/components/navigation/Segment'
import { useEffect, useState } from "react";
import { kIsAndroid, rpxToPx } from "@/utils/tools";
import './setting.scss'
import { getNotifySettings, postNotifySettings } from "@/services/notifications";
import { ColorType } from "@/context/themes/color";
import { getLocalPush } from "@/features/trackTimeDuration/actions/TrackTimeActions";
import { useSelector } from "react-redux";
import ProductList from "../store/product_list";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";

let useNavigation;
let AppState;
if (process.env.TARO_ENV == 'rn') {
    AppState = require("react-native").AppState
    useNavigation = require("@react-navigation/native").useNavigation
}
export default function Page() {
    const { t } = useTranslation()
    const [segmentIndex, setSegmentIndex] = useState(0)
    const [notification, setNotification] = useState<any>(null)
    const [isExtra, setIsExtra] = useState(false)
    const [isSunrise, setIsSunrise] = useState(false)
    const [isSunset, setIsSunset] = useState(false)
    const [isSolarNoon, setIsSolarNoon] = useState(false)
    const [loaded, setLoaded] = useState(false)

    const [systemFast, setSystemFast] = useState(true)
    const [systemExtra, setSystemExtra] = useState(true)
    const [systemSun, setSystemSun] = useState(true)
    const user = useSelector((state: any) => state.user);

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

    // useEffect(() => {
        
    // }, [])

    useEffect(()=>{
        checkSetting()
        getSettings()
        if (process.env.TARO_ENV == 'rn') {
            AppState.addEventListener('change', handleAppStateChange);
            // AppState.addEventListener('change', handleAppStateChange);
            // navigation.addListener('focus', () => {
            //     checkSetting()
            // });

            // // 当页面即将消失时执行
            // navigation.addListener('blur', () => {
            //     console.log('notfication setting blur')
            // });

        }
    },[user.isLogin])

    const handleAppStateChange = (nextAppState) => {
        console.log(nextAppState)
        if (nextAppState != 'active') {
            return
        }
        if (nextAppState == 'active') {
            checkSetting()
        }

    };

    useDidShow(() => {
        console.log('notfication setting user did show')
    })

    function getSettings() {
        getNotifySettings().then(res => {
            var dt = (res as any).notification
            setNotification(dt)
            setIsExtra(dt.fast_sleep.extra_reminders.in_app == 'ON')
            setIsSunrise(dt.follow_sun.sunrise.in_app == 'ON')
            setIsSunset(dt.follow_sun.sunset.in_app == 'ON')
            setIsSolarNoon(dt.follow_sun.solar_noon.in_app == 'ON')
            setLoaded(true)
        })
    }

    function checkSetting() {
        console.log('notification setting begin')
        if (process.env.TARO_ENV == 'rn' && kIsAndroid) {
            var Jto = require('react-native').NativeModules.NativeBridge;
            Jto.getChannelStatus().then(result => {
                var data = JSON.parse(result);
                console.log('notification setting', data)
                if (data.all) {

                }
                else {
                    var REMINDER_FS_STATUS = ''
                    var REMINDER_SUN_STATUS = ''
                    var REMINDER_FS_EXTRA_STATUS = ''

                    if ('REMINDER_FS' in data) {
                        REMINDER_FS_STATUS = data.REMINDER_FS ? 'ON' : 'OFF'
                        setSystemFast(data.REMINDER_FS)
                    }
                    else {
                        REMINDER_FS_STATUS = 'NA'
                    }

                    if ('REMINDER_SUN' in data) {
                        REMINDER_SUN_STATUS = data.REMINDER_SUN ? 'ON' : 'OFF'
                        setSystemSun(data.REMINDER_SUN)
                    }
                    else {
                        REMINDER_SUN_STATUS = 'NA'
                    }

                    if ('REMINDER_FS_EXTRA' in data) {
                        REMINDER_FS_EXTRA_STATUS = data.REMINDER_FS_EXTRA ? 'ON' : 'OFF'
                        setSystemExtra(data.REMINDER_FS_EXTRA)
                    }
                    else {
                        REMINDER_FS_EXTRA_STATUS = 'NA'
                    }

                    postNotifySettings({
                        channels: {
                            REMINDER_FS: {
                                system: REMINDER_FS_STATUS
                            },
                            REMINDER_SUN: {
                                system: REMINDER_SUN_STATUS
                            },
                            REMINDER_FS_EXTRA: {
                                system: REMINDER_FS_EXTRA_STATUS
                            }
                        }
                    }).then(res => {
                    })
                }
            })
        }

    }

    function goSetting() {
        if (process.env.TARO_ENV == 'rn' && kIsAndroid) {
            var Jto = require('react-native').NativeModules.NativeBridge;
            Jto.openNotificationSettings()
        }
    }

    function free() {
        return <View className="setting_container">
            <View className="setting_section">
                <Text className="setting_section_title">Fasting</Text>
            </View>
            <Text className="setting_header">Reminders</Text>
            <View className="setting_cell">
                <Text className="setting_cell_title" style={{ flex: 1 }}>At your scheduled time</Text>
                <Text className="setting_cell_value1">{notification.fast_sleep.reminders.in_app}</Text>
            </View>
            <Text className="setting_footer">A timely reminder so you never miss your scheduled time for fasting.</Text>
        </View>
    }

    function iap(){
        jumpPage('','ProductList',navigation)
    }

    function pro() {
        return <ScrollView style={{ flex: 1 }}>
            {/* <ProductList /> */}
            {/* <Text style={{fontSize:30,color:'#fff'}} onClick={iap}>iap test</Text> */}
            <View className="setting_container">
                <View className="setting_section">
                    <Text className="setting_section_title">Fasting with/or Sleep</Text>
                </View>
                <Text className="setting_header">Reminders</Text>
                <View className="setting_cell">
                    <Text className="setting_cell_title" style={{ flex: 1 }}>At my scheduled time</Text>
                    <Text className="setting_cell_value1">{systemFast ? 'Always' : 'Off'}</Text>
                </View>
                <Text className="setting_footer">A timely reminder so you never miss your scheduled time for fasting or sleep.</Text>
                <Text className="setting_header">Extra Reminders</Text>
                <View className="setting_cell">
                    <Text className="setting_cell_title" style={{ flex: 1 }}>If I missed previous action</Text>
                    <Switch className="myswitch" checked={isExtra} color={ColorType.fast} onChange={(e) => {
                        // setIsMulti(e.detail.value)
                        postNotifySettings({
                            notification: {
                                fast_sleep: {
                                    extra_reminders: {
                                        in_app: e.detail.value ? 'ON' : 'OFF'
                                    }
                                }
                            }
                        }).then(res => {
                            setIsExtra(e.detail.value)
                            getLocalPush()
                        })
                    }} />
                </View>
                <Text className="setting_footer">In cases when you missed a previous action, you receive another reminder to log it together with the current action. This gives you extra protection against any streak loss.</Text>
                <View className="setting_section">
                    <Text className="setting_section_title">Follow the Sun (PRO)</Text>
                </View>
                <Text className="setting_header">Reminders for Your Daily Local Sun Schedule</Text>
                <View className="setting_cell_group">
                    <View className="setting_cell_group_item">
                        <Text className="setting_cell_title" style={{ flex: 1 }}>Sunrise</Text>
                        <Switch className="myswitch" checked={isSunrise} color={ColorType.fast} onChange={(e) => {
                            // setIsMulti(e.detail.value)
                            postNotifySettings({
                                notification: {
                                    follow_sun: {
                                        sunrise: {
                                            in_app: e.detail.value ? 'ON' : 'OFF'
                                        }
                                    }
                                }
                            }).then(res => {
                                setIsSunrise(e.detail.value)
                                global.swiperDayNightRefresh()
                            })
                        }} />
                    </View>
                    <View className="setting_cell_group_item">
                        <Text className="setting_cell_title" style={{ flex: 1 }}>Sunset</Text>
                        <Switch className="myswitch" checked={isSunset} color={ColorType.fast} onChange={(e) => {
                            // setIsMulti(e.detail.value)
                            postNotifySettings({
                                notification: {
                                    follow_sun: {
                                        sunset: {
                                            in_app: e.detail.value ? 'ON' : 'OFF'
                                        }
                                    }
                                }
                            }).then(res => {
                                setIsSunset(e.detail.value)
                                global.swiperDayNightRefresh()
                            })
                        }} />
                    </View>
                    <View className="setting_cell_group_item">
                        <Text className="setting_cell_title" style={{ flex: 1 }}>Solar Noon</Text>
                        <Switch className="myswitch" checked={isSolarNoon} color={ColorType.fast} onChange={(e) => {
                            // setIsMulti(e.detail.value)
                            postNotifySettings({
                                notification: {
                                    follow_sun: {
                                        solar_noon: {
                                            in_app: e.detail.value ? 'ON' : 'OFF'
                                        }
                                    }
                                }
                            }).then(res => {
                                setIsSolarNoon(e.detail.value)
                                global.swiperDayNightRefresh()
                            })
                        }} />
                    </View>
                </View>
                <Text className="setting_footer">Note if live in polar region, during time of Polar Day (Midnight Sun) when the Sun is up all day and during time of Polar Night when the Sun is down all day, the only reminder available is for daily Solar Noon.</Text>
            </View>
        </ScrollView>
    }

    function checkSystemChannel() {
        if (!systemFast) {
            return true;
        }
        if (!systemExtra && isExtra) {
            return true;
        }
        if (!systemSun && (isSolarNoon || isSunrise || isSunset)) {
            return true;
        }

        return false;
    }

    return <View className="container" style={{ flex: 1 }}>
        {/* <View className='setting_segment'>
            <Segment titles={[
                `Free`,
                `Pro`,
            ]}
                changed={(e) => {
                    setSegmentIndex(e);
                    // global.segmentIndex = e
                    // console.log('segment item click', e)
                }} />
        </View> */}

        {
            loaded && pro()
        }
        {
            process.env.TARO_ENV == 'rn' && kIsAndroid && checkSystemChannel() && <View className="setting_tip" onClick={goSetting}>
                <Text className="setting_tip_text">Jump to App's Notifications settings{'>>'}</Text>
            </View>
        }
    </View>
}