import { View, Text, 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";
import { getPerm, userAccess } from "@/services/user";
import '@/features/trackTimeDuration/components/CheckAccess.scss';
import Modal from "@/components/layout/Modal.weapp";
import Layout from "@/components/layout/layout";
import { NaviBarTitleShowType, TemplateType } from "@/utils/types";
import TitleView from "@/features/trackTimeDuration/components/TitleView";

let useNavigation;
let AppState, Switch;
if (process.env.TARO_ENV == 'rn') {
    AppState = require("react-native").AppState
    Switch = require("react-native").Switch
    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 [showMemberAlert, setShowMemberAlert] = useState(false)
    const user = useSelector((state: any) => state.user);
    const accessObj = useSelector((state: any) => state.access);

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

    // useEffect(() => {

    // }, [])

    useEffect(() => {
        if (!user.isLogin) {
            return;
        }
        checkSetting()
        getSettings()
        getMemberStatus()
        if (process.env.TARO_ENV == 'rn') {
            navigation.setOptions({
                headerTitle: '',
            });
            AppState.addEventListener('change', handleAppStateChange);
            // AppState.addEventListener('change', handleAppStateChange);
            // navigation.addListener('focus', () => {
            //     checkSetting()
            // });

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

        }

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

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

        }
    }, [user.isLogin])

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

    };

    

    function getMemberStatus() {
        const { access } = accessObj
        if (access && access.member) {
            if (access.member.status == 'NON_MEMBER') {
                postNotifySettings({
                    notification: {
                        follow_sun: {
                            sunrise: {
                                in_app: 'OFF'
                            },
                            sunset: {
                                in_app: 'OFF'
                            },
                            solar_noon: {
                                in_app: 'OFF'
                            }
                        }
                    }
                }).then(res => {
                    setIsSolarNoon(false)
                    setIsSunset(false)
                    setIsSunrise(false)
                    global.swiperDayNightRefresh()
                })
            }
        }
    }

    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 confirm() {
        jumpPage('', 'ProductList', navigation)
        setShowMemberAlert(false)
    }



    function alertPop() {
        return <View className="fast_alert_container">
            <View className="fast_alert_content" catchMove>
                <View className="fast_alert_title">Pro Access</View>
                <View className="fast_alert_detail">With Pro Membership, you can set custom reminders and will be reminded even when you're not actively using the app.</View>
                <View className='fast_alert_confirm' onClick={confirm}>
                    <Text style={{ fontWeight: 'bold', color: ColorType.black }}>Become a Pro Member</Text>
                </View>
                <View className="fast_alert_cancel" onClick={()=>{setShowMemberAlert(false)}}>Not now</View>

            </View>
        </View>
    }

    function pro(isLogin: boolean) {
        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 & 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>
                    {
                        isLogin ? <Text className="setting_cell_value1">{systemFast ? 'Always' : 'Off'}</Text> :
                            <Text className="setting_cell_value1">Off</Text>
                    }

                </View>
                <Text className="setting_footer">A timely reminder so you never miss your schedule time for fasting and/or sleep.</Text>
                <Text className="setting_header">Extra Reminders (Pro)</Text>
                <View className="setting_cell">
                    <Text className="setting_cell_title" style={{ flex: 1 }}>Missed previous action</Text>
                    <Switch className="myswitch" value={isLogin ? isExtra : false} color={ColorType.fast} trackColor={{ true: ColorType.fast }} onChange={(e) => {
                        if (!isLogin) {
                            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
                            return
                        }
                        const value = e.nativeEvent.value
                        if (e.nativeEvent.value) {
                            if (accessObj && accessObj.access && accessObj.access.member.status == 'NON_MEMBER') {
                                // setTimeout(() => {
                                //     setIsSunrise(false)
                                // }, 1000)

                                // jumpPage('', 'ProductList', navigation)
                                setShowMemberAlert(true)
                                return
                            }

                        }
                        postNotifySettings({
                            notification: {
                                fast_sleep: {
                                    extra_reminders: {
                                        in_app: value ? 'ON' : 'OFF'
                                    }
                                }
                            }
                        }).then(res => {
                            setIsExtra(value)
                            getLocalPush()
                        })
                    }} />
                </View>
                <Text className="setting_footer">In case you missed your previous action, receive another reminder to log it together with the current one. This gives you extra protection against any streak loss.</Text>
                <View className="setting_section">
                    <Text className="setting_section_title">The Sun (PRO)</Text>
                </View>
                <Text className="setting_header">Reminders for Your Daily Local Salor Times</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" value={isLogin ? isSunrise : false} color={ColorType.fast} trackColor={{ true: ColorType.fast }} onChange={(e) => {
                            // setIsMulti(e.nativeEvent.value)
                            if (!isLogin) {
                                jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
                                return
                            }
                            const value = e.nativeEvent.value
                            if (e.nativeEvent.value) {
                                if (accessObj && accessObj.access && accessObj.access.member.status == 'NON_MEMBER') {
                                    // setTimeout(() => {
                                    //     setIsSunrise(false)
                                    // }, 1000)

                                    // jumpPage('', 'ProductList', navigation)
                                    setShowMemberAlert(true)
                                    return
                                }

                            }
                            postNotifySettings({
                                notification: {
                                    follow_sun: {
                                        sunrise: {
                                            in_app: value ? 'ON' : 'OFF'
                                        }
                                    }
                                }
                            }).then(res => {
                                setIsSunrise(value)
                                // setIsSunrise(e.nativeEvent.value)
                                global.swiperDayNightRefresh()
                            })
                        }} />
                    </View>
                    <View className="setting_cell_group_item">
                        <Text className="setting_cell_title" style={{ flex: 1 }}>Sunset</Text>
                        <Switch className="myswitch" value={isLogin ? isSunset : false} trackColor={{ true: ColorType.fast }} color={ColorType.fast} onChange={(e) => {
                            // setIsMulti(e.nativeEvent.value)
                            if (!isLogin) {
                                jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
                                return
                            }
                            const value = e.nativeEvent.value
                            if (e.nativeEvent.value) {
                                if (accessObj && accessObj.access && accessObj.access.member.status == 'NON_MEMBER') {
                                    // setTimeout(() => {
                                    //     setIsSunset(false)
                                    // }, 1000)

                                    // jumpPage('', 'ProductList', navigation)
                                    setShowMemberAlert(true)
                                    return
                                }

                            }
                            postNotifySettings({
                                notification: {
                                    follow_sun: {
                                        sunset: {
                                            in_app: value ? 'ON' : 'OFF'
                                        }
                                    }
                                }
                            }).then(res => {
                                setIsSunset(value)
                                global.swiperDayNightRefresh()
                            })
                        }} />
                    </View>
                    <View className="setting_cell_group_item">
                        <Text className="setting_cell_title" style={{ flex: 1 }}>Solar Noon</Text>
                        <Switch className="myswitch" value={isLogin ? isSolarNoon : false} trackColor={{ true: ColorType.fast }} color={ColorType.fast} onChange={(e) => {
                            // setIsMulti(e.nativeEvent.value)
                            if (!isLogin) {
                                jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
                                return
                            }
                            const value = e.nativeEvent.value
                            if (e.nativeEvent.value) {
                                if (accessObj && accessObj.access && accessObj.access.member.status == 'NON_MEMBER') {
                                    // setTimeout(() => {
                                    //     setIsSolarNoon(false)
                                    // }, 1000)

                                    // jumpPage('', 'ProductList', navigation)
                                    setShowMemberAlert(true)
                                    return
                                }

                            }
                            postNotifySettings({
                                notification: {
                                    follow_sun: {
                                        solar_noon: {
                                            in_app: value ? 'ON' : 'OFF'
                                        }
                                    }
                                }
                            }).then(res => {
                                debugger
                                setIsSolarNoon(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;
    }

    if (!user.isLogin)
        return <View className="container" style={{ flex: 1 }}>
            <Layout title={t('page.reminders.title')}
                titleShowStyle={NaviBarTitleShowType.scrollToShow}
                type={TemplateType.customHeader}
                header={headerView()}
            // triggered={triggered}
            // refresh={refresh}
            >
                {
                    pro(false)
                }
            </Layout>
        </View>

    function headerView() {
        return <TitleView title={t('page.reminders.title')} showAddBtn={false}>
        </TitleView>
    }

    return <View className="container" style={{ flex: 1 }}>
        <Layout title={t('page.reminders.title')}
            titleShowStyle={NaviBarTitleShowType.scrollToShow}
            type={TemplateType.customHeader}
            header={headerView()}
        // triggered={triggered}
        // refresh={refresh}
        >
            {
                loaded && pro(true)
            }
            {
                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>
            }
            {
                showMemberAlert && process.env.TARO_ENV == 'weapp' && alertPop()
            }
            {
                showMemberAlert && process.env.TARO_ENV == 'rn' && <Modal dismiss={() => { setShowMemberAlert(false) }}>
                    <View style={{ backgroundColor: 'rgba(0,0,0,0.95)', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
                        {alertPop()}
                    </View>
                </Modal>
            }
        </Layout>
    </View>
}