import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";

import BookItem from "../book-item";
import { pxTransform } from "../../../../utils";
import type { Book } from "../../../../typings/book";

export default function BottomBox({
    dataSource = []
}: {
    dataSource: Book[]
}) {
    return <View style={style.main}>
        <View style={[style.header]}>
            <Text style={style.title}>
                还书记录
            </Text>
            <View style={style.sign} />
            <View style={[style.scrollview, { flex: 1 }]}>
                <ScrollView
                    horizontal
                    overScrollMode="never"
                    showsHorizontalScrollIndicator={false}
                >
                    {dataSource.map((item, index) => {
                        return <BookItem
                            key={`book-card-item-${index}`}
                            index={index + 1}
                            dataSource={item}
                        />
                    })}
                </ScrollView>
            </View>
        </View>
    </View>
}

const style = StyleSheet.create({
    main: {
        position: 'absolute',
        top: pxTransform(805),
        left: pxTransform(70),
        width: pxTransform(849),
        height: pxTransform(576),
        borderRadius: pxTransform(20)
    },
    header: {
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        width: `100%`,
        height: pxTransform(41),
        marginTop: pxTransform(35)
    },
    title: {
        position: 'relative',
        zIndex: 5,
        fontSize: pxTransform(36),
        color: `#555`,
        fontFamily: 'bold'
    },
    sign: {
        position: 'relative',
        zIndex: 1,
        top: pxTransform(-(16 / 2)),
        width: pxTransform(240),
        height: pxTransform(16),
        borderRadius: pxTransform(20),
        backgroundColor: `#7DE88E`
    },
    scrollview: {
        marginTop: pxTransform(33 - 10),
        width: pxTransform(809),
        height: pxTransform(436.09)
    }
})