import React, { PureComponent } from 'react';
import { Text, View } from 'react-native';
import { style as S } from '../styles/ReviewIndicator';
const Star = ({ renderStar, style, text }) => {
    if (renderStar) {
        return renderStar();
    }
    return <Text style={[S.star, style]}>{text}</Text>;
};
export class ReviewIndicator extends PureComponent {
    constructor() {
        super(...arguments);
        this.getItemData = (value, base = 5) => {
            if (value >= base) {
                return {
                    full: base,
                    empty: 0,
                    hasHalf: false
                };
            }
            let full = Math.floor(value);
            const decimal = value - full;
            let empty = base - full;
            let hasHalf = false;
            if (decimal < 0.25) {
                hasHalf = false;
            }
            else if (decimal >= 0.25 && decimal <= 0.75) {
                hasHalf = true;
                empty = empty - 1;
            }
            else {
                hasHalf = false;
                full = full + 1;
                empty = empty - 1;
            }
            return {
                full,
                empty,
                hasHalf
            };
        };
        this.renderHalf = () => {
            const { itemSize, itemColor } = this.props;
            const customStarStyle = {};
            const containerStarStyle = {};
            const starHalfRightStyle = {};
            if (itemSize) {
                customStarStyle.fontSize = itemSize;
                customStarStyle.width = itemSize;
                customStarStyle.height = itemSize * 1.2;
                containerStarStyle.width = itemSize;
                containerStarStyle.height = itemSize * 1.2;
                starHalfRightStyle.marginLeft = -itemSize / 2;
            }
            if (itemColor) {
                customStarStyle.color = itemColor;
            }
            return (<View style={[S.halfStarContainer, containerStarStyle]}>
        <View style={S.starHalfLeftWrap}>
          <Star text='★' style={[S.starHalfLeft, customStarStyle]}/>
        </View>
        <View style={S.starHalfRightWrap}>
          <Star text='★' style={[customStarStyle, S.starHalfRight, starHalfRightStyle, S.emptyStar]}/>
        </View>
      </View>);
        };
    }
    render() {
        const { value, base, itemSize, itemColor, style, renderFullStar, renderHalfStar, renderEmptyStar } = this.props;
        const itemData = this.getItemData(value, base);
        const customStarStyle = {};
        if (itemSize) {
            customStarStyle.fontSize = itemSize;
            customStarStyle.width = itemSize;
            customStarStyle.height = itemSize * 1.2;
        }
        if (itemColor) {
            customStarStyle.color = itemColor;
        }
        return (<View style={[S.container, style]}>
        {newArray(itemData.full).map(v => (<Star text='★' renderStar={renderFullStar} style={customStarStyle} key={v}/>))}
        {itemData.hasHalf &&
            (renderHalfStar ? renderHalfStar() : this.renderHalf())}
        {newArray(itemData.empty).map(v => (<Star text='★' renderStar={renderEmptyStar} style={[customStarStyle, S.emptyStar]} key={v}/>))}
      </View>);
    }
}
function newArray(num) {
    const arr = [];
    for (let i = 0; i < num; i++) {
        arr.push(i);
    }
    return arr;
}
//# sourceMappingURL=ReviewIndicator.js.map