import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import './sass/zone.scss';
import avatar from './image/beauty.png';
import display from './image/display_small.png';


class Card extends React.Component {
    constructor(props){
        super(props);
        this.datetime = new Date(this.props.datetime);
    }
    render(){
        return (
            <div className="content-card">
                <aside><img src={avatar}/></aside>
                <section>
                    <div className="info">
                        <div>{this.props.title}</div>
                        <div>{this.datetime.toLocaleString()}</div>
                    </div>
                    <div className="content" dangerouslySetInnerHTML={{__html: this.props.content}}>
                    </div>
                </section>
            </div>
        );
    }
}

class About extends React.Component {
    render(){
        return (
            <div id="zone-about">
                <div className="zone-stats">
                    <span>
                        <div>{this.props.counts}</div>
                        <div>动态</div>
                    </span>
                    <span>
                        <div>11100</div>
                        <div>点赞</div>
                    </span>
                    <span>
                        <div>29%</div>
                        <div>热度</div>
                    </span>
                </div>
                <div>和🐌邂逅</div>
            </div>
        );
    }
}

function CopyRight(){
    let version = 'v20190908';
    console.log(`\n %c Zip Personal Zone ${version} %c blog.ourfor.top \n\n`,"color: #fadfa3; background: #030307; padding:5px 0;","color: white; background: rgba(221,20,20,1); padding:5px 0;");
}

function Content(props){
    let data = props.data;
    CopyRight();
    let content = data.map(value=>{
        return <Card key={value.datetime} datetime={value.datetime} title={value.title}
        content={value.content} tag={value.tag}/>
    });
    return (
        <div>
            <section>
                <div className="zone-display">
                    <img src={display} />
                </div>
                {content}
            </section>
            <aside>
                <About counts={props.data.length}/>
            </aside>
        </div>
    );
}

class Zone extends Component {
    constructor(props){
        super(props);
        this.state = {
            data: []
        };
    }
    componentWillMount(){
        $.get('https://api.ourfor.top/blog/zones',data=>{
            this.setState({
                data
            });
        },'json');
    }
    render(){
        return (
           <div id="zone">
               <Content data={this.state.data}/>
           </div> 
        );
        
    }
}

export default Zone;