import React, { useRef, useState, useMemo, useEffect } from "react";
import { getCookie, removeCookie } from 'react-use-cookie';
import axios from "axios";
import happyimg from "../mysy_img/happy.png";
import parse from 'html-react-parser'

let PageSize = 5;
const NosArticlesAlaUne = (props) => {

    const [userconnected, setuserconnected] = useState("");
    const [SearchText, setSearchText] = useState("");
    const [result, setResult] = useState("");
    const [myApiResponse, setmyApiResponse] = useState("");
    const [displayAllClasses, setdisplayAllClasses] = useState(true);
    const [showelement, setshowelement] = useState("init");
    const [country_code, setcountry_code] = useState("");
    const [country_name, setcountry_name] = useState("");
    const [city, setcity] = useState("");
    const [postal, setpostal] = useState("");
    const [latitude, setlatitude] = useState("");
    const [longitude, setlongitude] = useState("");
    const [IPv4, setIPv4] = useState("");
    const [state, setstate] = useState("");
    const [currentPage2, setCurrentPage2] = useState(1);
    const [fin, setfin] = useState(0);
    const stored_user = getCookie('tokenmysych');


    function searchFunction(e) {
        var form = new FormData();
        form.append("token", "");
        // Ajout des info IP user
        form.append("user_ip", IPv4);
        form.append("user_country_code", country_code);
        form.append("user_country_name", country_name);
        form.append("user_city", city);
        form.append("user_postal", postal);
        form.append("user_latitude", latitude);
        form.append("user_longitude", longitude);
        form.append("user_state", state);


        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_article_avis_alaune/";


        axios.post(myurl, form).then(res => {
            if (String(res.data.status) != String("false")) {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setmyApiResponse("True");
                setResult(res.data.message)
                //setmyApimyApiMessage("OK")
                ////console.log("taille = "+res.data.message.length);
            }
            else {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setmyApiResponse("False");
                //setmyApimyApiMessage("")
            }


        }).catch((error) => {
            console.warn('Not good man :( mysearchtext = ');
            setmyApiResponse("False");
            //setmyApimyApiMessage("")
        })
    }


    const currentTableData2 = useMemo(() => {
        if (result) {
            const firstPageIndex = (currentPage2 - 1) * PageSize;
            const lastPageIndex = firstPageIndex + PageSize;
            setfin(1);
            return result.slice(firstPageIndex, lastPageIndex);
        }
        else {
            return [];
            setfin(0);
        }
    }, [currentPage2]);

    useEffect(() => {
        setdisplayAllClasses("true");
        searchFunction();
        if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
            setuserconnected("0");
        } else {
            setuserconnected("1");
        }
    }, [])


    return (
        <div className="articlesalaUne">
            {String(myApiResponse) === String("False") && <div className="koUpdateData">

                Impossible de contacter l'hote distant
            </div>}

            {result && myApiResponse == "True" && fin == 0 && result.slice(0, PageSize).map((article) => (
                <div style={{ border: "2px" }} >
                    <ul onClick={(e) => {
                        e.preventDefault();
                        window.open(
                            "Display-Detail-Article/" + JSON.parse(article).internal_url,
                            '_blank'
                        );

                    }}>
                        <li><u>Titre:</u> {JSON.parse(article).title_formation}  </li>


                        {String(JSON.parse(article).note) > "4" && <li> <u>Note:</u> {JSON.parse(article).note} / 5
                            <img class="img_note_class" src={happyimg} align="right" alt="MySy Training happy" />
                        </li>}


                        <li> <u>Date:</u> { (String(JSON.parse(article).date_avis)).substring(0, 10)}</li>
                        <li><u>Avis:</u> {parse( (String(JSON.parse(article).avis)).substring(0, 50))} ...</li>

                    </ul>
                    <hr />

                </div>

            ))}
        </div>

    )
}

export default NosArticlesAlaUne;