import React,{useState} from "react";
import ReactDOM from "react-dom";
import "./sass/post.scss";
import pic from "./picture.js";
import axios from "axios";
import {index as copyright} from './copyright.js';
import {Popover,Tooltip} from 'antd';

let Icon = (props)=>{
    const [tip,setTip] = useState(0);
    return <div className='card-share'>
        <p>微博</p>
        <p>微信</p>
        <Tooltip title={tip} trigger='click'>
        <p href={props.link} onClick={e=>{
            navigator.clipboard.writeText(props.link).then(
                resolve=>setTip('保存成功'),
                reject=>setTip('保存失败')
                );
        }}>复制链接</p>
        </Tooltip>
    </div>  
}
    
    

let Share = (props)=>(
    <Popover content={<Icon link={props.link} />} title="Share" trigger='click'>
        <div name="icon-share"></div> 分享
    </Popover>
);

let origin = document.location.origin;

class PostCard extends React.Component {
    render(){
        let essay = this.props.essay;
        let prefix = this.props.prefix;
        let suffix = this.props.suffix;
        let image = prefix + this.props.image + suffix;
        let src = "";
        let datetime = new Date(essay.writeAt);
        return (
            <section className="post-card">
                <div className="post-title">{essay.article}</div>
                <div className="post-info">
                    <img src={src} data-src={image} alt="文章图片" />
                    <div className="post-desc">
                        {essay.summary}
                    <a href={"/post/" + essay.article}>阅读全文</a>
                    </div>
                </div>
                <div className="post-stats">
                    <span className="post-info-time"><div name="icon-time"></div>{datetime.toLocaleString()}</span>
                    <span className="post-info-comments"><div name="icon-chatbubbles"></div>{this.props.comment}条</span>
                    <span className="post-info-share"><Share link={`${origin}/post/${essay.article}`} /></span>
                    <span className="post-info-words"><div name="icon-stats"></div>{this.props.count}字</span>
                    <span className="post-info-views"><div name="icon-eye"></div>{essay.views}</span>
                    <span className="post-info-tags"><div name="icon-pricetags"></div> 灌水</span>
                </div>
            </section>
        );
    }
}


class PostList extends React.Component {
    constructor(props){
        super(props);
        let length = this.props.images.length;
        let show = new Array(length).fill(false)
        // this.state = {
        //     show: show,
        // }
    }

    componentDidMount(){
        copyright();
        let imgs = [];
        $('.post-info img[src=""]').each(function(i){
            imgs.push($(this))
        })
        pic.lazy_load_picture(imgs);
        $(window).on('scroll',()=>{
            pic.lazy_load_picture(imgs);
        })
    }

    render(){
        let essays = this.props.essays;
        let imgs = this.props.images;
        let counts = this.props.counts;
        let comments = this.props.comments;
        let urlPrefix = 'https://file.ourfor.top/source/blog/cover';
        let prefix = `${urlPrefix}/img/thumb/`;
        let suffix = ""
        // let show = this.state.show;
        if(this.props.support){
            prefix = `${urlPrefix}/zip/thumb/`;
            suffix = ".webp"
        }
        let content = essays.map(function(value,index){
            return <PostCard key={`post-${index}`} prefix={prefix} suffix={suffix} 
            count={counts[index]} comment={comments[index]} 
            essay={value} image={imgs[index]}/>
        });
        return ( 
            <div className="post-list">
                {content}
            </div>
        );
    }
}

class PageNav extends React.Component{
    handleClick(i){
        window.open(`${this.props.base}?page=${i}`,'_self')
    }
    open(href){
        window.open(href,'_self')
    }
    render(){
        let list = new Array(this.props.pages+1).fill(0);
        list = list.map((value,index)=>index);
        let content = list.map(value=>{
            return <a className='page-nav-a' key={`page-nav-${value}`} href={`/?page=${value}`}>{value+1}</a>
        });
        let curr = content[this.props.current];
        curr = React.cloneElement(curr,{onClick: ()=>{},className: 'page-current page-nav-a'});
        content[this.props.current] = curr
        if(this.props.prev!=="") {
            let prev = <a className='page-nav-a' key={`page-nav-prev`} href={`${this.props.base}${this.props.prev}`}>上一页</a>
            content.unshift(prev);
        }
        if(this.props.next!=="") {
            let next = <a className='page-nav-a' key={`page-nav-next`} href={`${this.props.base}${this.props.next}`}>下一页</a>
            content.push(next);
        }
        return content
    }
}

function urlQuery(url){
    let uri = new URL(document.location.href);
    let params = uri.search.replace(/^\?/,'').split('&');
    let query = {};
    params.forEach(value=>{
        let s = value.split('=')
        query[s[0]]=s[1];
    });
    return query;
}

class Postload{
    constructor(url){
        let query = urlQuery(document.location.href);
        let page = query.page?query.page:0
        let api = `${url}?page=${page}`
        let ele = $("#post-content")[0];
        let nav = $('#page-nav')[0];
        axios.get(api).then(result=>{
            result = result.data;
            pic.check_webp_feature('lossy',(feature,ok)=>{
                ReactDOM.render(<PageNav pages={result.pages} 
                    prev={result.prev} next={result.next} current={page} base={"/"} />,nav);
                ReactDOM.render(<PostList essays={result.text} images={result.imgs} 
                    counts={result.counts} comments={result.comments} support={ok}/>,ele);
            });
        })
    }
}
export default Postload;
export {PageNav};