import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { getAlbums, getAlbumsStat } from "@/services/health";
import { View, Text, Image } from "@tarojs/components";
import { useEffect, useState } from "react";
import './Album.scss'

export default function Album() {

    const [medias, setMedias] = useState<any>([])
    const [window, setWindow] = useState('')
    const [stat, setStat] = useState<any>(null)

    useEffect(() => {
        getAlbumsData('')
    }, [])

    function getAlbumsData(str) {
        getAlbums({
            page: 1,
            limit: 50,
            window: str
        }).then(res => {
            setMedias((res as any).data)
        })

        getAlbumsStat().then(res => {
            setStat(res)
        })
    }


    return <View style={{ display: 'flex', flexDirection: 'column' }}>
        {
            stat && <View style={{ flexDirection: 'row', alignItems: 'center', display: 'flex' }}>
                <View onClick={() => {
                    setWindow('')
                    getAlbumsData('')
                }}>全部{stat.total}</View>
                {
                    stat.items.map((item, index) => {
                        return <View key={index} onClick={() => {
                            setWindow(item.window)
                            getAlbumsData(item.window)
                        }}>{item.window}{item.image_count}</View>
                    })
                }
            </View>
        }

        <View className="photo_wall" onClick={() => {
            jumpPage('/pages/account/PhotoWall')
        }}>
            <View style={{ flex: 1 }} />
            <Text className="photo_wall_text">Photo Wall</Text>
            <Image className="photo_wall_arrow" src={require('@assets/_health/arrow2.png')} />
            <View className="album_line" />
        </View>
        {
            medias.map((item, index) => {
                return <View className="album_item" key={index}>
                    <Text className="album_date">{(item.date + '').substring(6, 9)}</Text>
                    <View className="album_container">
                        {
                            item.images.map((photo, i) => {
                                return <Image mode="aspectFill" src={photo} key={i * 900} className="album_phone" />
                            })
                        }
                    </View>
                    <View className="album_line" />
                </View>
            })
        }
    </View>
}