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 }) {
    const [list, setList] = useState(props.array)

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

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

        })
    }

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

    return <View style={{ flexDirection: 'column', display: 'flex' }}>
        {
            list.map((item, index) => {
                return <FoodTimelineItem data={item} key={index} delete={() => del(index)} preview={()=>preview(index)}/>
            })
        }
    </View>
}