import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import { Rating as NextRating } from '@alifd/next';
class Rating extends Component {
    constructor(props) {
        super(props);
        this.genElements = values => {
            if (!values) {
                return null;
            }
            return values.map((value, index) => {
                return this.addEle(value, index);
            });
        };
        this.addEle = (value, index) => {
            const { prefix = 'next-' } = this.props;
            return React.createElement("label", { key: index, className: `${prefix}rating-icon` },
                React.createElement("i", { className: `${prefix}icon` },
                    React.createElement("div", { style: { paddingLeft: '4px', width: '24px', fontSize: '20px', textAlign: 'center', display: 'inline-block' } }, value)));
        };
        this.handleHover = value => {
            this.setState({ hoverValue: value });
        };
        this.handleLeave = () => {
            this.setState({ hoverValue: 0 });
        };
        this.state = {
            value: 'value' in props ? props.value : props.defaultValue,
            hoverValue: 0,
            iconSpace: 0,
            iconSize: 0,
            clicked: false, // 标记组件是否被点击过
        };
    }
    static currentValue(min, max, hoverValue, stateValue) {
        let value = hoverValue ? hoverValue : stateValue;
        value = value >= max ? max : value;
        value = value <= min ? min : value;
        return value || 0;
    }
    // 获取overlay的长度
    getOverlayWidth(size) {
        const { hoverValue } = this.state;
        let iconSize, iconSpace;
        if (size === 'medium') {
            iconSize = 12;
            iconSpace = 12;
        }
        else if (size === 'large') {
            iconSize = 14;
            iconSpace = 14;
        }
        else if (size === 'small') {
            iconSize = 10;
            iconSpace = 10;
        }
        if (!iconSpace || !iconSize) {
            return 'auto';
        }
        const value = Rating.currentValue(0, this.props.count, hoverValue, this.state.value);
        const floorValue = Math.floor(value);
        return iconSize * value + (floorValue + 1) * iconSpace;
    }
    render() {
        const { prefix = 'next-', className, shape, count = 5, size } = this.props;
        const arrayNew = [...Array(count + 1).keys()].splice(1);
        const overlayStyle = {
            width: this.getOverlayWidth(size),
            top: '0',
            position: 'absolute',
            height: '24px',
            overflow: 'hidden',
        };
        if (shape === 'number') {
            return (React.createElement("div", { style: { position: 'relative' }, className: cls(className, {
                    [`${prefix}small`]: size === 'small',
                    [`${prefix}large`]: size === 'large',
                }) },
                React.createElement(NextRating, Object.assign({}, this.props, { onChange: val => this.setState({ hoverValue: val }), onHoverChange: val => this.setState({ hoverValue: val }), style: { zIndex: 1001 }, allowHalf: false, className: cls(className, {
                        [`${prefix}rate-number`]: true,
                    }) })),
                React.createElement("div", { className: `${prefix}number-rate-underlay`, style: { position: 'absolute', top: '0', zIndex: -1 } }, this.genElements(arrayNew)),
                React.createElement("div", { className: `${prefix}number-rate-overlay`, 
                    // @ts-ignore
                    style: overlayStyle }, this.genElements(arrayNew))));
        }
        return (React.createElement(NextRating, Object.assign({}, this.props, { className: cls(className, {
                [`${prefix}rate-favorite`]: shape === 'favorite',
            }) })));
    }
}
export default ConfigProvider.config(Rating);
