import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import { Rating as NextRating } from '@alifd/next';
import { RatingProps as NextRatingProps } from '@alifd/next/types/rating';


interface RatingAddProps {
  shape?: 'star' | 'favorite' | 'number'
}

interface RatingProps extends NextRatingProps, RatingAddProps { }

interface IRatingState {
  value: string,
  hoverValue: number,
  iconSpace: number,
  iconSize: number,
  clicked: boolean,
}


class Rating extends Component<RatingProps, IRatingState> {

  static currentValue(min, max, hoverValue, stateValue) {
    let value = hoverValue ? hoverValue : stateValue;

    value = value >= max ? max : value;
    value = value <= min ? min : value;

    return value || 0;
  }

  constructor(props) {
    super(props);

    this.state = {
      value: 'value' in props ? props.value : props.defaultValue,
      hoverValue: 0,
      iconSpace: 0,
      iconSize: 0,
      clicked: false, // 标记组件是否被点击过
    };
  }

  genElements = values => {
    if (!values) {
      return null;
    }
    return values.map((value, index) => {
      return this.addEle(value, index);
    });
  };

  addEle = (value, index) => {
    const { prefix = 'next-' } = this.props;
    return <label key={index} className={`${prefix}rating-icon`}><i className={`${prefix}icon`}><div style={{ paddingLeft: '4px', width: '24px', fontSize: '20px', textAlign: 'center', display: 'inline-block' }}>{value}</div></i></label>;
  };

  // 获取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;
  }

  handleHover = value => {
    this.setState({ hoverValue: value });
  };

  handleLeave = () => {
    this.setState({ hoverValue: 0 });
  };

  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 (
        <div
          style={{ position: 'relative' }}
          className={cls(className, {
            [`${prefix}small`]: size === 'small',
            [`${prefix}large`]: size === 'large',
          })}>
          <NextRating
            {...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,
            })}
          />
          <div
            className={`${prefix}number-rate-underlay`}
            style={{ position: 'absolute', top: '0' }}>
            {this.genElements(arrayNew)}
          </div>
          <div className={`${prefix}number-rate-overlay`}
            // @ts-ignore
            style={overlayStyle} >
            {this.genElements(arrayNew)}
          </div>
        </div>
      );
    }
    return (
      <NextRating
        {...this.props}
        className={cls(className, {
          [`${prefix}rate-favorite`]: shape === 'favorite',
        })}
      />
    );
  }
}

export default ConfigProvider.config(Rating);