import React, { useRef, useState, useEffect } from "react";
import axios from "axios";
import { useParams } from 'react-router-dom'
import { Helmet } from "react-helmet";
import { useCookies } from "react-cookie";
import Articles from "../components/Article";

import New_Article_2025 from "./New_C_Article_2025";

import 'react-discussion-board/dist/index.css'
import { useForm } from 'react-hook-form';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import parse from 'html-react-parser'
import Fotter_v3 from "./Fotter_v3";
import Header from "./Header";
import img_met_digital from "../mysy_img/met_digital.jpg";


import { makeStyles } from "@material-ui/core/styles";
import Paper from '@material-ui/core/Paper';
import Draggable from 'react-draggable';
import { FcRightUp } from "react-icons/fc";
import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
import { FcUndo } from "react-icons/fc";
import IMG_Default_Article from "../mysy_img/img_default_article_detail.jpg";

function PaperComponent(props) {
    return (
        <Draggable
            handle="#draggable-dialog-title"
            cancel={'[class*="MuiDialogContent-root"]'}
        >
            <Paper {...props} />
        </Draggable>
    );
}


const useStyles = makeStyles((theme) => ({

    dialog: {
        position: 'absolute',
        // left: 10,
        top: 400
    },

    paper: {
        overflowY: 'unset',
    },
    customizedButton: {
        position: 'absolute',
        left: '98%',
        top: '-3%',
        backgroundColor: 'lightgray',
        color: 'gray',
    },
}));


function New_C_Article_Detail_2025() {

    const classes = useStyles();

    const [img_displayed, setimg_displayed] = useState("");

    const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
    const { articleId } = useParams();
    const [result, setResult] = useState("");

    const [myApiResponse, setmyApiResponse] = useState("false");
    const [DetailArticleAvis, setDetailArticleAvis] = useState([]);
    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 [userIp, setuserIp] = useState("");
    const [action, setaction] = useState("");
    const [userconnected, setuserconnected] = useState("");
    const stored_user = cookie.tokenmysych;


    const [display_header_img, setdisplay_header_img] = useState("");

    const {
        register,
        handleSubmit,
        reset,
        formState: { errors }
    } = useForm();


    const [pagecanoniktitle, setpagecanoniktitle] = useState("");
    const [pagecanonikurl, setpagecanonikurl] = useState(window.location.host);
    const [article_img, setarticle_img] = useState("")
    const [page_meta_description, setpage_meta_description] = useState("");


    useEffect(() => {

        setpagecanonikurl(window.location.host);



        async function fetchData() {
            const result = await axios('https://geolocation-db.com/json/',);
            setuserIp(result.data.IPv4);
            setcountry_code(result.data.country_code);
            setcountry_name(result.data.country_name);
            setcity(result.data.city);
            setpostal(result.data.postal);
            setlatitude(result.data.latitude);
            setlongitude(result.data.longitude);
            setIPv4(result.data.IPv4);
            setstate(result.data.state);
            setuserIp(result.data.IPv4);

        }
        fetchData();
        Display();
        //  Display_article_comment();
        Get_3_Articles();

        //alert("stored_user =  "+stored_user);
        if (typeof (articleId) === "undefined") {
            setaction("creation");
        } else {
            setaction("affichage");

        }

        if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
            setuserconnected("0");
        } else {
            setuserconnected("1");
        }

        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });
        //     setwindowWidth(window.innerWidth);
        //   setwindowheight(window.innerHeight);


        //console.log(" articleId = " + articleId);
    }, []);




    function Display(e) {


        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_articles_avis/";
        var form = new FormData();
        form.append("internal_url", articleId);
        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);


        //alert("myurl = "+myurl);

        axios.post(myurl, form).then(res => {
            // console.log(" In test  res.data.status = " + res.data.status);
            //console.log(" In Display iiii  res.data.message = " + res.data.message);
            if (String(res.data.status) === "true") {
                setmyApiResponse("True");

                setResult(res.data.message);
                setDetailArticleAvis(JSON.parse(res.data.message));

                var my_avis = JSON.parse(res.data.message)

                if (my_avis && my_avis.display_header_img && String(my_avis.display_header_img) === "0") {
                    setdisplay_header_img("0")
                }

                if (my_avis && my_avis.title_formation) {
                    setpagecanoniktitle(my_avis.title_formation);
                }

                if (my_avis && my_avis.meta_description) {
                    setpage_meta_description(my_avis.meta_description);
                } else {
                    setpage_meta_description(my_avis.title_formation);
                }


                if (my_avis && my_avis.internal_url) {
                    setpagecanonikurl(my_avis.internal_url);

                    console.log(process.env.REACT_APP_BASE_URL + "/" + my_avis.internal_url);
                }


                if (my_avis && my_avis.img_path && String(my_avis.img_path).length > 10) {
                    setarticle_img(my_avis.img_path);
                } else {
                    setarticle_img(img_met_digital);
                }

                //  console.log(" ### my_avis.display_header_img = ", my_avis.display_header_img);
            }
            else {
                //console.log(" In Erreur   res.data.status = " + res.data.status);
                //console.log(" In Erreur  res.data.message = " + res.data.message);
                setmyApiResponse("False");
            }
        }).catch((error) => {
            console.warn('Not good man :( mysearchtext = ');
            setmyApiResponse("False");
        })
    }

    const [Get_3_Articles_api, setGet_3_Articles_api] = useState();
    const [Get_3_Articles_result, setGet_3_Articles_result] = useState([]);
    function Get_3_Articles(e) {
        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_last_3_articles/";
        var form = new FormData();
        form.append("internal_url", articleId);
        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);


        // console.log("#### form = ", form);

        axios.post(myurl, form).then(res => {
            //console.log(" In Get_3_Articles  res.data.status = " + res.data.status);
            //console.log(" In Get_3_Articles  res.data.message = " + res.data.message);

            if (String(res.data.status) === "true") {

                setGet_3_Articles_result(res.data.message);

            }
            else {
                //console.log(" In Erreur   res.data.status = " + res.data.status);
                //console.log(" In Erreur  res.data.message = " + res.data.message);
                setGet_3_Articles_result([]);
                setGet_3_Articles_api("False");

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


    const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
    const [alert_message, setalert_message] = useState("");
    const [alert_type, setalert_type] = useState("");

    function clear_alert_message() {
        setalert_message("");
    }
    function clear_alert_type() {
        setalert_type("");
    }

    function clear_display_alert_mysy() {
        setdisplay_alert_mysy("");
    }


    return (
        <div className="new_s_article_detail_2025">

            {/***  Affichage des messages d'alerte*/}
            {display_alert_mysy && String(display_alert_mysy) === "1" &&
                <Module_Alert_Confirmation alert_message={alert_message}
                    alert_type={alert_type}
                    clear_alert_message={clear_alert_message}
                    clear_alert_type={clear_alert_type}
                    clear_display_alert_mysy={clear_display_alert_mysy}
                />
            }
            {/*** FIN Affichage des messages d'alerte*/}

            <Helmet>
                <title>{`${pagecanoniktitle}`}</title>
                <meta name="title" content={`${pagecanoniktitle}`} />
                <meta name="description" content={`${page_meta_description}`} />
                <meta name="robots" content="index,follow" />
                <link rel="canonical" href={window.location.href} />

            </Helmet>

            {(!display_header_img || String(display_header_img) === "0") && <div className="head_background_without_img_displayed">
                &nbsp;
            </div>}

            {display_header_img && String(display_header_img) !== "0" && <div className="head_background_with_img_displayed">
                &nbsp;
            </div>}


            <div style={{ width: '100%', float: 'left' }}>


                <div style={{ "width": '90%', margin: 'auto' }}>
                    {(!display_header_img || String(display_header_img) === "0") && <div className="blog_info_without_img_displayed">
                        <div className="blog_info_title">
                            {DetailArticleAvis.title_formation}
                        </div>

                        {DetailArticleAvis && DetailArticleAvis.date_avis && <div className="blog_info_date">
                            {(String(DetailArticleAvis.date_avis)).substring(0, 16)}
                        </div>}
                        <div className="frame1_img">
                            &nbsp;
                        </div>
                    </div>}

                    {display_header_img && String(display_header_img) !== "0" && <div className="blog_info_with_img_displayed">
                        <div className="blog_info_title">
                            {DetailArticleAvis.title_formation}
                        </div>

                        {DetailArticleAvis && DetailArticleAvis.date_avis && <div className="blog_info_date">
                            {(String(DetailArticleAvis.date_avis)).substring(0, 16)}
                        </div>}
                        <div className="frame1_img">
                            <img src={article_img} alt={pagecanoniktitle} className="frame1_img_class" />
                        </div>
                    </div>}

                    {DetailArticleAvis && DetailArticleAvis.avis && <div className="blog_info_paragraphe">
                        <div className="paragraphe_text">
                            {parse(DetailArticleAvis.avis)}
                        </div>
                    </div>}

                </div>

            </div>

            <div style={{ width: '100%', float: 'left', marginTop: '10rem' }}>
                <div style={{ "width": '80%', margin: 'auto' }}>
                    <div className="retour_list_articles" onClick={(e) => {
                        e.preventDefault();
                        window.location.href = "/Recherche-Article-formation"
                    }}>
                        <FcUndo /> &nbsp; Retour vers la liste des articles
                    </div>


                </div>
            </div>


            <div style={{ width: '100%', float: 'left', marginTop: '10rem' }}>
                <div style={{ "width": '80%', margin: 'auto' }}>
                    <div className="a_decouvrir">
                        À découvrir également
                    </div>

                    <div style={{ width: '100%', float: 'left' }}>

                        {Get_3_Articles_result && Get_3_Articles_result.map((formation) => (
                            <div style={{ width: '32%', float: 'left', }}>
                                <New_Article_2025 article={JSON.parse(formation)} key={JSON.parse(formation).title_formation} />
                            </div>

                        ))}
                    </div>
                </div>
            </div>

            <div style={{ width: '100%', float: 'left', marginTop: '10rem' }}>
                <div style={{ "width": '80%', margin: 'auto' }}>
                    <div className="a_decouvrir">
                        À découvrir également
                    </div>

                    <div style={{ width: '100%', float: 'left' }}>


                        <div style={{ width: '32%', float: 'left', maxWidth: '350px', margin: '15px' }}>
                            <div style={{ width: '100%', float: 'left', marginBottom: '10px', padding: '2px' }}>
                                <img src={IMG_Default_Article} className="a_decouvrir_img_class" />
                            </div>

                            <div style={{ width: '100%', float: 'left', marginBottom: '15px' }}>
                                <div style={{ width: '90%', float: 'left', textAlign: 'left' }} className="a_decouvrir_title">
                                    How collaboration makes us better designers
                                </div>
                                <div style={{ width: '9%', float: 'right' }}>
                                    <FcRightUp style={{}} />
                                </div>

                            </div>

                            <div style={{ width: '100%', float: 'left', }} className="a_decouvrir_small_desc">
                                Collaboration can make our teams stronger, and our individual designs better.
                            </div>

                        </div>

                        <div style={{ width: '32%', float: 'left', maxWidth: '350px', margin: '15px' }}>
                            <div style={{ width: '100%', float: 'left', marginBottom: '10px', padding: '2px' }}>
                                <img src={IMG_Default_Article} className="a_decouvrir_img_class" />
                            </div>

                            <div style={{ width: '100%', float: 'left', marginBottom: '15px' }}>
                                <div style={{ width: '90%', float: 'left', textAlign: 'left' }} className="a_decouvrir_title">
                                    How collaboration makes us better designers
                                </div>
                                <div style={{ width: '9%', float: 'right' }}>
                                    <FcRightUp style={{}} />
                                </div>

                            </div>

                            <div style={{ width: '100%', float: 'left', }} className="a_decouvrir_small_desc">
                                Collaboration can make our teams stronger, and our individual designs better.
                            </div>

                        </div>

                        <div style={{ width: '32%', float: 'left', maxWidth: '350px', margin: '15px' }}>
                            <div style={{ width: '100%', float: 'left', marginBottom: '10px', padding: '2px' }}>
                                <img src={IMG_Default_Article} className="a_decouvrir_img_class" />
                            </div>

                            <div style={{ width: '100%', float: 'left', marginBottom: '15px' }}>
                                <div style={{ width: '90%', float: 'left', textAlign: 'left' }} className="a_decouvrir_title">
                                    How collaboration makes us better designers
                                </div>
                                <div style={{ width: '9%', float: 'right' }}>
                                    <FcRightUp style={{}} />
                                </div>

                            </div>

                            <div style={{ width: '100%', float: 'left', }} className="a_decouvrir_small_desc">
                                Collaboration can make our teams stronger, and our individual designs better.
                            </div>

                        </div>


                    </div>
                </div>
            </div>

        </div>
    );
}

export default New_C_Article_Detail_2025;

