import React, {Component} from 'react';
import axios from 'axios';
import {Helmet} from "react-helmet";

//component
import Product from './Product'
import {Link} from 'react-router-dom';

class Store extends Component {
    constructor(props) {
        super(props);
        this.state = {
            post: {},
            products: null,
            postId: props.match.params.id,
            username: props.match.params.username,
            uid: null,
            morePost: null
        };
        // this.newPost = this.newPost.bind(this);
    }

    componentDidMount() {
        this.getData('une-certaine-url').then((res) => {
            this.setState({
                uid: res.data.id,
            });
            this.getData('une-autre-url').then((res) => {
                this.setState({
                    post: res.data,
                    products: res.data.products,
                    morePost: res.data.posts
                })
            });
        })
    }

    getData = (url) => {
        return new Promise((resolv, reject) => {
            axios.get(url).then((res) => {
                resolv(res);
            }).catch((err) => {
                console.log(err)
            });
        });
    }

    newPost = (product, ok) => {
        console.log("productssss", product.id);
        let url = 'une-autre-url';
        this.getUpdateData(url).then((res) => {
            console.log("its promise res", res);
            this.renderProduct();
        });
    }

    getUpdateData = (url) => {
        return new Promise((resolve, reject) => {
            this.getData(url).then((res) => {
                // console.log("res", res.data.products);
                this.setState({
                    post: res.data,
                    products: res.data.products,
                    morePost: res.data.posts
                }, resolve(res));
            })
        })
    }


    renderProduct = () => {
        console.log("state actuelle", this.state);
        if (this.state.products != null || this.state.products != undefined) {
            return this.state.products.map((product, index) => {
                return (
                    <Product key={index} id={product.id} product={product}
                             user={this.state.uid}/>
                )
            });
        }
    }

    render() {
        if (this.state.morePost != null || this.state.morePost != undefined) {
            var renderMorePost = this.state.morePost.map((product, index) =>
                <Link to={`/store/${this.props.match.params.username}/${product.id}`} component={Store}
                      className="image-square-more" onClick={this.newPost.bind(this, product)}>
                    <img src={product.image} alt="" className="img-fluid gradient"/>
                </Link>
            );
        }


        return (
            <div>
                <Helmet>
                    <meta charSet="utf-8"/>
                    <title>{`${this.props.match.params.username} Store`}</title>
                    <link rel="canonical" href={`http://${this.props.match.params.username}.io`}/>
                </Helmet>
                <div className="story">
                    <div className="item-img">
                        <img src={this.state.post.image} className="gradient" alt=""/>
                    </div>
                    <div className="content-product">
                        {this.renderProduct()}
                    </div>
                    <div className="more-post">
                        <div className="title">
                            <span>Plus de posts</span>
                        </div>
                        <div className="d-flex justify-content-start align-items-center">
                            {renderMorePost}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Store;