import JournalCover from "@/features/journal/components/journal_cover";
import { getJournals } from "@/services/health";
import { View, Text, Image } from "@tarojs/components";
import { useEffect, useState } from "react";
import './Journal.scss'
import dayjs from "dayjs";
import { rpxToPx } from "@/utils/tools";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import NewHeader, { NewHeaderType } from "@/_health/components/new_header";

export default function Journal() {
    const [journals, setJournals] = useState<any>([])
    useEffect(() => {
        getJounalsData()
    }, [])

    function getJounalsData() {
        getJournals({
            page: 1,
            limit: 50
        }).then(res => {
            let list = (res as any).data
            list.forEach(element => {
                let array: any = []
                element.windows.map(item => {
                    item.events.map(event => {
                        event.moments && event.moments.map(moment => {
                            if (moment.media && moment.media.length > 0) {
                                moment.media.map(media => {
                                    array.push(media.url)
                                })
                            }
                        })

                    })
                })
                element.imgs = array
            });
            setJournals((res as any).data)
        })
    }

    function getTitle(item) {
        if (item.title) {
            return item.title;
        }
        if (item.moment) {
            return item.moment.title
        }
        return ''
    }


    return <View style={{ display: 'flex', flexDirection: 'column' }}>
        <NewHeader type={NewHeaderType.left} title="Journal" />
        {
            journals.map((item, index) => {
                return <View className="album_item" key={index} onClick={() => {
                    jumpPage('/pages/account/JournalDetail?detail=' + JSON.stringify(item))
                }}>
                    <Text className="album_date">{(item.date + '').substring(6, 9)}</Text>
                    {
                        item.imgs.length > 0 && <JournalCover imgs={item.imgs} />
                    }

                    <View style={{
                        display: 'flex',
                        flexDirection: 'column',
                        flex: 1,
                        backgroundColor: item.imgs.length == 0 ? '#f5f5f5' : 'transparent',
                        padding: item.imgs.length == 0 ? rpxToPx(20) : 0,
                        marginRight: rpxToPx(40)
                    }}>
                        {
                            item.windows.map((window, i) => {
                                return <View key={i * 400} style={{ display: 'flex', flexDirection: 'column' }}>{
                                    window.events.map((item2, index2) => {
                                        return <Text key={index2 * 1000}>
                                            <Text className="history_item_title" style={{color:'#000'}}>{dayjs(item2.time.timestamp).format('HH:mm')} {getTitle(item2)} </Text>
                                            {
                                                item2.moment && item2.moment.description && <Text className="history_item_desc">{item2.moment.description}</Text>
                                            }
                                        </Text>
                                    })
                                }</View>

                            })
                        }

                    </View>
                    <View className="border_footer_line" />
                </View>
            })
        }
    </View>
}