import React, { useEffect, useState } from "react";
import { Image, StyleSheet, Text, View } from "react-native";
import { images } from "../../../../assets";
import { pxTransform } from "../../../../../../utils";
import type { Book } from '../../../../../../typings/book';

function randCover() {
    const array = [images.cover1, images.cover2, images.cover3, images.cover4];
    const randNum = Math.floor(Math.random() * array.length);
    return array[randNum];
}

export default function BookCard({
    index = 1,
    dataSource
}: {
    index: number,
    dataSource?: Book
}) {
    const [realCover, setRealCover] = useState(dataSource?.cover || randCover());
    useEffect(() => {
        if (dataSource?.cover?.replace(/\s*/g, "")) {
            setRealCover(dataSource?.cover);
        } else {
            setRealCover(randCover());
        }
    }, [dataSource?.cover])
    return (
        <View style={style.main}>
            <Image
                style={style.cover}
                source={typeof realCover === 'string' ? { uri: realCover || '' } : realCover}
                defaultSource={randCover()}
                onError={() => setRealCover(randCover())}
            />
            <View style={style.header_box}>
                <View style={{
                    ...style.rank_box,
                    ...index === 1 && {
                        backgroundColor: `#F3B619`
                    },
                    ...index === 2 && {
                        backgroundColor: `#C0C0C0`
                    },
                    ...index === 3 && {
                        backgroundColor: `#CD7F32`
                    }
                }}>
                    <Text style={style.rank_text}>
                        {index}
                    </Text>
                </View>
                <Text style={style.count}>
                    {dataSource?.repayCount ? `借阅${dataSource.repayCount}次` : `热门借阅`}
                </Text>
            </View>
            <View style={style.bottom_box}>
                <Text numberOfLines={1} style={style.title}>
                    {dataSource?.title || '归还书籍'}
                </Text>
            </View>
        </View>
    )
}

const style = StyleSheet.create({
    main: {
        position: 'relative',
        marginTop: pxTransform(26),
        width: pxTransform(176),
        height: pxTransform(250),
        borderRadius: pxTransform(20),
        overflow: 'hidden'
    },
    cover: {
        position: 'absolute',
        width: "100%",
        height: "100%"
    },
    header_box: {
        display: "flex",
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        top: 0,
        left: 0,
        width: "100%",
        height: pxTransform(42.4),
        backgroundColor: `rgba(238,240,241,0.6)`
    },
    rank_box: {
        width: pxTransform(21),
        height: pxTransform(21),
        borderRadius: pxTransform(21),
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: `#FFFFFF`
    },
    rank_text: {
        fontSize: pxTransform(16),
        color: `#FFFFFF`,
        fontWeight: '400'
    },
    count: {
        marginLeft: pxTransform(15),
        fontSize: pxTransform(16),
        color: `#111111`,
        fontWeight: '400'
    },
    bottom_box: {
        display: "flex",
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        bottom: 0,
        left: 0,
        width: "100%",
        height: pxTransform(42.4),
        backgroundColor: `rgba(255,254,254,0.8)`
    },
    title: {
        color: `#111111`,
        fontSize: pxTransform(24),
        fontWeight: '400'
    }
})