import { useEffect, useState } from 'react'
import { View } from '@tarojs/components'
import Taro, { useDidHide, useDidShow, useShareAppMessage } from '@tarojs/taro'
import { observer, inject } from 'mobx-react'
//==========components组件引用========================
import TopNavBar from '@src/components/TopNavBar/index'
import ScrollViewHoc from '@src/components/ScrollView'
import BookboxRowSmall from '@src/components/PupPetry/BookBox/BookboxRowSmall'
import { Store } from '@src/app'
import useApi from '@src/Hook/useApi'
import SwipeAction from '@src/components/SwipeAction'
import { share } from '@src/utils'
import Empty from '@src/components/Empty'


interface Props {
    store: Store;
}
interface ContentData {
    current: number,
    total: number,
    size: number,
    records: any[]
}

const Index: React.FC<Props> = ({ store }) => {
    const { indexStore, modalStore } = store
    const { bookrackList } = useApi()
    const [readData, setReadData] = useState<ContentData>({
        current: 0,
        total: 0,
        size: 0,
        records: []
    })
    const [pageShow, setPageShow] = useState(false)
    const [showEmpty, setShowEmpty] = useState(false)
    const actions = (id) => {
        return [
            {
                text: '删除', backgroundColor: '#f44336', id, onClick: (id) => {
                    console.log("删除", id)
                }
            },
        ]
    };
    useEffect(() => {
        if (pageShow) {
            getList({ pageNum: 1, pageSize: 20 })
        }
        return () => {
            log("componentWillUnmount");
        };
    }, [pageShow]); // Dependency array, runs effect only once on mount and unmount

    // 使用 useDidShow 代替 onShow
    useDidShow(() => {
        setPageShow(true)
    });

    // 使用 useDidHide 如果需要在页面隐藏时做一些处理
    useDidHide(() => {
        setPageShow(false)
    });
    const getList = (params) => {
        showEmpty && setShowEmpty(false)
        bookrackList(params).then((res: any) => {
            if (res?.data?.data?.total === 0) {
                !showEmpty && setShowEmpty(true)
             }
            setReadData(res.data.data)
            return res
        })
        return Promise.resolve(true)
    }
    const load = () => {
        return new Promise((resolve, reject) => {
            let { size, total, records } = readData
            let pageSize = size + 20
            if (records?.length >= total) {
                Taro.showToast({
                    title: '没有更多了~~',
                    duration: 2000,
                    icon: 'none'
                })
                reject()
                return
            } else {
                getList({ pageNum: 1, pageSize }).then(res => {
                    resolve(true)
                })
            }
        })
    }
    // 分享
    useShareAppMessage(async () => {
        // 获取当前页面栈
        const pages = Taro.getCurrentPages()
        // 获取栈顶的页面，即当前页面
        const currentPage = pages[pages.length - 1]
        // 获取页面的路径和参数
        const route = currentPage.route // 页面路径
        if (route) {
            let shareInfo = await share({ pagePath: route })
            let { sharePicUrl, shareTitles, pageName, pagePath } = shareInfo
            return {
                title: shareTitles || app.appInfo?.appName + '-' + pageName,
                path: pagePath || undefined,
                imageUrl: sharePicUrl || undefined
            }
        }
        return {}
    })
    return <View>
        <ScrollViewHoc
            load={load}
            filterClassName={""}
            navHeight={indexStore.navHeight}
        >
            <View className={"index pd_btm"}>
                {
                    readData?.records?.length > 0 && readData?.records?.map((item: any, index: number) => {
                        return <View key={item.bookId} style={{ margin: '30rpx' }}>
                            <SwipeAction actions={actions(item.bookId)}>
                                <BookboxRowSmall {...item} />
                            </SwipeAction>
                        </View>
                    })
                }
                {
                    showEmpty && <Empty />
                }
            </View>
        </ScrollViewHoc>
    </View>
};
export default TopNavBar((inject('store')(observer(Index))), {
    title: '阅读记录'
})
