import * as React from 'react';
import * as Styled from './Marquee.style'

/**
 * 滚动的文字公告
 */
export default class Marquee extends React.Component {
    static defaultProps = {
        speed: 2,
        textList: []
    }

    public constructor() {
        super();
    }

    public componentDidMount() {
        let step = () => {
            this.scroll();
            this.timer = requestAnimationFrame(step)
        }
        this.timer = requestAnimationFrame(step);
        // setInterval(() => {this.scroll()}, this.props.speed);
    }

    public componentWillUnmount() {
        this.timer && cancelAnimationFrame(this.timer);
    }

    public scroll(){
        if(this.scrollEnd.offsetWidth - this.scrollWrap.scrollLeft <= 0)   {
            this.scrollWrap.scrollLeft -= this.scrollBegin.offsetWidth;
        }
        else {
            this.scrollWrap.scrollLeft += this.props.speed;
        }
    }

    public render() {
        const {textList} = this.props;
        return (
            <Styled.MarqueeContainer ref={ref => this.scrollWrap = ref}>
                    <ul ref={ref => this.scrollBegin = ref}>
                        {(textList||[]).map(text => (<li>{text}</li>))}
                    </ul>
                    <ul ref={ref => this.scrollEnd = ref}>
                        {(textList||[]).map(text => (<li>{text}</li>))}
                    </ul>
            </Styled.MarqueeContainer>
        )
    }
}