import React from 'react';
import {View, Text, StyleSheet, ViewStyle} from 'react-native';
import Icon from './icon';
import {$Colors} from './style';

type RattingProps = {
    total: number | string;
    counts: number | string;
    scores: number[];
    style?: ViewStyle;
};

const RatingChart: React.FC<RattingProps> = ({total, counts, scores}) => {
    const SumScore = scores.reduce((a, c) => a + c, 0);
    const Stars: React.FC<{level: number}> = ({level}) => {
        const _stars = new Array(5 - level).fill(0);
        return (
            <View style={styles.stars}>
                {_stars.map((_, i) => (
                    <Icon name="star" style={styles.star} key={i} />
                ))}
            </View>
        );
    };
    const Bar: React.FC<{percent: number}> = ({percent}) => {
        return (
            <View style={styles.bar}>
                <View style={[styles.barHl, {width: `${percent * 1.8}%`}]} />
            </View>
        );
    };
    return (
        <View style={styles.wrapper}>
            <View style={styles.left}>
                <Text style={styles.score}>{total}</Text>
                <Text style={styles.comment_counts}>{counts}条评论</Text>
            </View>
            <View style={styles.right}>
                {scores.map((s, i) => (
                    <View style={styles.starbar} key={i}>
                        <Stars level={i} />
                        <Bar percent={(s / SumScore) * 100} />
                    </View>
                ))}
            </View>
        </View>
    );
};

export default RatingChart;

const styles = StyleSheet.create({
    wrapper: {
        display: 'flex',
        flexDirection: 'row',
        borderWidth: 1,
        borderColor: $Colors.grayII,
        padding: 15,
        borderRadius: 5,
        paddingTop: 20,
        paddingBottom: 20,
        marginBottom: 20,
        alignItems: 'flex-start',
    },
    left: {
        display: 'flex',
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    score: {
        fontSize: 32,
        lineHeight: 32,
        fontWeight: 'bold',
        color: $Colors.normalText,
    },
    comment_counts: {
        color: $Colors.lightText,
        fontSize: 14,
        lineHeight: 16,
        paddingTop: 10,
    },
    right: {
        display: 'flex',
        flex: 3,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    starbar: {
        display: 'flex',
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 2,
        paddingBottom: 2,
    },
    stars: {
        display: 'flex',
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        height: 8,
    },
    star: {
        color: $Colors.third,
        fontSize: 8,
        marginLeft: 1,
    },
    bar: {
        flex: 3,
        backgroundColor: $Colors.grayII,
        height: 6,
        marginLeft: 5,
        borderRadius: 3,
        overflow: 'hidden',
    },
    barHl: {
        backgroundColor: $Colors.third,
        height: '100%',
        borderRadius: 3,
    },
});