import { Dimensions, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
import * as Progress from 'react-native-progress';
import { ThemedText } from "../ThemedText";
import { formatBytes } from "../utils/bytes";

interface Data {
    all: number;
    used: number;
}
interface ResourceProps {
    title: string;
    subtitle?: string;
    data: Data
    icon: any;
    style?: StyleProp<ViewStyle>;
    // 是否要转化单位
    isFormatBytes?: boolean;
}
const ResourceComponent = (props: ResourceProps) => {
    // 获取设备的宽度
    const width = Dimensions.get("window").width;
    return (
        <View style={[styles.container, props.style]}>
            <View style={styles.content}>
                <View style={styles.titleContent}>
                    <ThemedText style={styles.title} className="!text-textSecondary">{props.title}</ThemedText>
                    <Progress.Bar progress={props.data.used / props.data.all} width={width * 0.5} color="#AC7E35" unfilledColor="#fff" borderWidth={0} borderRadius={8} height={2} />
                </View>
                <View style={styles.dataContainer}>
                    <ThemedText style={styles.dataText}>{props.isFormatBytes ? formatBytes(props.data.used) : props.data.used}/{props.isFormatBytes ? formatBytes(props.data.all) : props.data.all}</ThemedText>
                    {props.icon}
                </View>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        width: "100%",
        position: "relative",
    },
    content: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    titleContent: {
        width: "90%",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "flex-start",
        gap: 16,
    },
    title: {
        fontSize: 12,
        fontWeight: "700",
        width: "25%"
    },

    dataContainer: {
        position: "absolute",
        right: 0,
        top: -16,
        flexDirection: "row",
        alignItems: "center",
        gap: 8,
    },
    dataText: {
        fontSize: 12,
        width: "100%",
        color: "#AC7E35",
        textAlign: "right",
    },
})

export default ResourceComponent;