import { View } from '@tarojs/components'
import './FoodTimeline.scss'
import FoodTimelineItem from './FoodTimelineItem'
import { useEffect, useState } from 'react'
import { delFoodJournal } from '@/services/foodJournal'
import Taro from '@tarojs/taro'

export default function Component(props: { array: any, refresh: Function, forceRefresh: Function,removeIndex:Function }) {
    const [list, setList] = useState(props.array)

    useEffect(() => {
        setList(props.array)
    }, [props.array, props.array.length])

    function del(index) {
        delFoodJournal(list[index].id).then(res => {
            props.removeIndex(index)
            // var temps = list.splice(index, 1)
            // setList(temps)
            // props.refresh()
        }).catch(e => {

        })
    }

    // function preview(index){
    //     var urls:any = []
    //     list.map(item=>{
    //         urls.push(item.cover)
    //     })
    //     Taro.previewImage({
    //         current: list[index].cover,
    //         urls: urls
    //     })
    // }

    function preview(index) {
        var urls: any = []
        //微信限制 最多50张
        if (list.length <= 50) {
            list.map(item => {
                urls.push({
                    url: item.media[0].url,
                    type: item.media[0].url.indexOf('mp4') != -1 ? 'video' : 'image'
                })
            })
        }
        else {

            var begin = index - 20 < 0 ? 0 : index - 20
            var end = index + 20 > list.length - 1 ? list.length - 1 : index + 20
            for (var i = begin; i <= end; i++) {
                var item = list[i]
                urls.push({
                    url: item.media[0].url,
                    type: item.media[0].url.indexOf('mp4') != -1 ? 'video' : 'image'
                })
            }
        }

        var currentUrl = list[index].media[0].url
        var page = 0;
        for (var i = 0; i < urls.length; i++) {
            if (currentUrl == urls[i].url) {
                page = i
            }
        }
        if (process.env.TARO_ENV=='rn'){
            Taro.previewImage({
                current: currentUrl,
                urls: [currentUrl]
            })
        }
        else {
            Taro.previewMedia({
                current: page,
                sources: urls
            })
        }
        
    }

    function updateItem(index, data) {
        list[index] = data
        setList(list)
    }

    return <View style={{ flexDirection: 'column', display: 'flex' }}>
        {
            list.map((item, index) => {
                return <FoodTimelineItem data={item} index={index} key={index}
                    delete={() => del(index)}
                    preview={() => preview(index)}
                    update={(data) => updateItem(index, data)}
                    forceRefresh={() => props.forceRefresh()}
                    refresh={() => { props.refresh(); }}
                    isLast={index == list.length - 1}
                />
            })
        }
    </View>
}