import { View, Image, Text } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import './JournalDetail.scss'
import Taro from "@tarojs/taro";
import dayjs from "dayjs";
import { rpxToPx } from "@/utils/tools";
import { MainColorType } from "@/context/themes/color";
import TimeTitleDesc from "@/_health/components/time_title_desc";
import CoverList from "@/_health/components/cover_list";
import ListFooter from "@/_health/components/list_footer";

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

export default function JournalDetail() {
    const health = useSelector((state: any) => state.health);
    const user = useSelector((state: any) => state.user);
    const [imgs, setImgs] = useState<any>([])
    const [events, setEvents] = useState<any>([])

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

    if (process.env.TARO_ENV == 'rn') {
        router = useRoute()
    }
    else {
        router = useRouter()
    }
    const [data, setData] = useState<any>(JSON.parse(router.params.detail))
    // const [detail, setDetail] = useState(JSON.parse(router.params.detail))

    useEffect(() => {
        let obj = JSON.parse(router.params.detail)

        console.log(obj)

        var array: any = []

        obj.windows.map(item => {
            item.events.map(tem => {
                array.push(tem)
            })
        })
        const sortedArray = array.sort((a, b) => {
            return a.time.timestamp - b.time.timestamp;
        });

        // 返回一个新数组
        const newArray = [...sortedArray];
        setImgs(obj.imgs)
        setEvents(newArray)
    }, [])


    function preview(url) {

        Taro.previewImage({
            current: url,
            urls: imgs
        })
    }

    function eventList(detail, index) {
        const list = detail.moments
        return <View key={index}>
            {
                (detail.scenario != 'MEAL' && detail.scenario != 'ACTIVITY') && <View style={{ flexDirection: 'column', display: 'flex', marginBottom: rpxToPx(48) }}>
                    <TimeTitleDesc
                        timeObj={detail.time}
                        time={dayjs(detail.time.timestamp).format('HH:mm')}
                        title={detail.title}
                    // desc={item.description}
                    />
                </View>
            }
            {
                detail.scenario == 'ACTIVITY' && !list && <View style={{ flexDirection: 'column', display: 'flex', marginBottom: rpxToPx(48) }}>
                    <TimeTitleDesc
                        timeObj={detail.time}
                        time={dayjs(detail.time.timestamp).format('HH:mm')}
                        title={detail.title}
                    // desc={item.description}
                    />

                    {/* {
                        item.media && item.media.length > 0 && <Image mode="aspectFill" src={item.media[0].url} style={{ width: 60, height: 60, marginTop: 5 }} />
                    } */}
                </View>
            }
            {
                list && list.map((item, index) => {
                    return <View key={index} style={{ flexDirection: 'column', display: 'flex', marginBottom: rpxToPx(48) }}>
                        <TimeTitleDesc
                            timeObj={detail.time}
                            time={dayjs(detail.time.timestamp).format('HH:mm')}
                            title={detail.title}
                            desc={item.description}
                        />

                        {/* {
                            item.media && item.media.length > 0 && <Image mode="aspectFill" src={item.media[0].url} style={{ width: 60, height: 60, marginTop: 5 }} />
                        } */}
                    </View>
                })
            }
        </View>
    }


    return <View>
        <View className="journal_detail">
            <Image className="header_avatar" src={user.avatar} mode="aspectFill" />
            <View className="jounal_content">
                <Text className="journal_nickname">{user.nickname}</Text>
                <View style={{ flexDirection: 'column', display: 'flex', marginTop: rpxToPx(16) }}>
                    {
                        events.map((item, index) => {
                            return eventList(item, index)
                            // if (item.scenario != 'MEAL' && item.scenario != 'ACTIVITY') {
                            //     return <View key={index} style={{ marginBottom: index < events.length - 1 ? rpxToPx(48) : 0, display: 'flex', flexDirection: 'column' }}>

                            //         <Text style={{ color: '#5C7099' }}>{dayjs(item.time.timestamp).format('HH:mm')}
                            //             {
                            //                 item.title && <Text> {item.title}</Text>
                            //             }
                            //         </Text>
                            //     </View>
                            // }

                            // if (item.scenario == 'ACTIVITY') {
                            //     return <View key={index} style={{ marginBottom: index < events.length - 1 ? rpxToPx(48) : 0, display: 'flex', flexDirection: 'column' }}>

                            //         <Text style={{ color: '#5C7099' }}>{dayjs(item.time.timestamp).format('HH:mm')}
                            //             {
                            //                 item.title && <Text> {item.title}</Text>
                            //             }
                            //         </Text>
                            //     </View>
                            // }

                            // return <View key={index} style={{ marginBottom: index < events.length - 1 ? rpxToPx(48) : 0, display: 'flex', flexDirection: 'column' }}>
                            //     <Text >
                            //         {
                            //             item.time && <Text style={{ color: '#5C7099' }}>{dayjs(item.time.timestamp).format('HH:mm')} </Text>
                            //         }
                            //         {
                            //             item.title && <Text> {item.title} </Text>
                            //         }
                            //         {
                            //             item.moments && item.moment.description && <Text> {item.moment.description} </Text>
                            //         }

                            //     </Text>
                            // </View>
                        })
                    }
                </View>

                <View className="img_container" style={{ marginTop: -rpxToPx(24) }}>
                    <CoverList
                        imgs={imgs}
                        count={imgs.length}
                    />
                    {/* {
                        imgs.map((item, index) => {
                            return <Image key={index} src={item} className="journal_img" mode="aspectFill" onClick={() => {
                                preview(item)
                            }} />
                        })
                    } */}
                </View>

                <Text className="h24" style={{ color: MainColorType.g02 }}>发布于{dayjs(data.publish_timestamp).format('MM-DD HH:mm')}</Text>
            </View>


        </View>
        <ListFooter />
    </View>
}