import React, { useRef, useState, useEffect } from "react";
import { Button, } from "reactstrap";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import happyimg from "../mysy_img/happy.png";
import unhappyimg from "../mysy_img/nothappy.png";
import middleimg from "../mysy_img/middle.png";
import parse from 'html-react-parser'
import img_met_autre from "../mysy_img/met_autre.jpg";
import img_met_digital from "../mysy_img/met_digital.jpg";
import { Rating } from 'react-simple-star-rating'
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';

import moment from "moment";
import SendIcon from '@mui/icons-material/Send';
import axios from "axios";
import { Editor } from '@tinymce/tinymce-react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { format } from 'date-fns'
import { FcInfo } from "react-icons/fc";
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip } from 'react-tooltip'
import { getCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import Checkbox from '@mui/material/Checkbox';
import Box from '@mui/material/Box';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';

import FavoriteIcon from '@mui/icons-material/Favorite';
import NavigationIcon from '@mui/icons-material/Navigation';
import { FcPlus } from "react-icons/fc";
import { MdDeleteForever } from "react-icons/md";

import { AddCircleOutline } from "@mui/icons-material";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import TextField from '@mui/material/TextField';
import { FcRightUp } from "react-icons/fc";

import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
import { IconButton } from '@material-ui/core';
import { makeStyles } from "@material-ui/core/styles";
import Paper from '@material-ui/core/Paper';
import Draggable from 'react-draggable';

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',
  },
}));


const New_Article_2025 = (props) => {

  const classes = useStyles();
  const history = useHistory();
  const [isLoading, setLoading] = useState();

  const [rating, setRating] = useState(props.article.note * 20)
  //console.log(props.article.note * 10);
  // Catch Rating value

  function handleRating(rate) {
    alert(" rate =" + rate);
    setRating(40);
  }

  const [country_code, setcountry_code] = useState("FR");
  const [country_name, setcountry_name] = useState("France");
  const [city, setcity] = useState("Paris");
  const [postal, setpostal] = useState("75001");
  const [latitude, setlatitude] = useState("48.861000061035156");
  const [longitude, setlongitude] = useState("2.3380000591278076");
  const [IPv4, setIPv4] = useState("172.71.122.128");
  const [state, setstate] = useState("France");
  const [userIp, setuserIp] = useState("172.71.122.128");

  const [title_resized, settitle_resized] = useState("")

  const [article_img, setarticle_img] = useState("")

  const [edit_article, setedit_article] = useState("")

  const [selected_id, setselected_id] = useState(props.article._id)


  const editorRef_texte_avis = useRef(null);
  const [editorRef_texte_avis_limite, seteditorRef_texte_avis] = useState(1000);
  const [field_texte_avis, setfield_texte_avis] = useState("");
  const [field_texte_avis_initial_value, setfield_texte_avis_initial_value] = useState("");

  const [is_data_changed, setis_data_changed] = useState("");

  const [editor_tochanged, seteditor_tochanged] = useState("");

  function editor_keyup() {
    setis_data_changed("1");
  }



  const [Get_Partner_Article_Avis_Data_api, setGet_Partner_Article_Avis_Data_api] = useState();
  const [Get_Partner_Article_Avis_Data_message, setGet_Partner_Article_Avis_Data_message] = useState();
  const [Get_Partner_Article_Avis_Data_result, setGet_Partner_Article_Avis_Data_result] = useState();
  function Get_Partner_Article_Avis_Data() {

    var form = new FormData();
    form.append("_id", props.article._id);

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

    var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_articles_avis_from_id/";
    setLoading(true);
    axios.post(myurl, form).then(res => {
      setLoading(false);
      if (String(res.data.status) === "true") {
        //console.log(" In Get_Partner_Article_Avis_Data  res.data.status = " + res.data.status);
        console.log(" In Get_Partner_Article_Avis_Data  res.data.message r_class = " + res.data.message);
        setGet_Partner_Article_Avis_Data_api("true");
        setGet_Partner_Article_Avis_Data_result(res.data.message);

        if (res.data.message.length > 0) {
          var mylocal_document = JSON.parse(res.data.message);

          if (mylocal_document.date_publication) {
            setarticle_avis_date_publication(moment((String(mylocal_document.date_publication)).substring(0, 10)).format('YYYY-MM-DD'));

            //console.log(" ### mylocal_document.date_publication = ", mylocal_document.date_publication);
          }

          if (mylocal_document.avis) {
            setarticle_avis_avis(mylocal_document.avis);
            setfield_texte_avis_initial_value(mylocal_document.avis);
            setfield_texte_avis(mylocal_document.avis);
          }
          else {
            setarticle_avis_avis("");
            setfield_texte_avis_initial_value("");
          }


          if (mylocal_document.internal_url)
            setarticle_avis_internal_url(mylocal_document.internal_url);

          setarticle_avis_display_header_img(false);
          if (mylocal_document.display_header_img && String(mylocal_document.display_header_img) === "1") {
            setarticle_avis_display_header_img(true);
          }



          if (mylocal_document.img_path) {
            setarticle_avis_img_path(mylocal_document.img_path);
            setimg_img_article_file(mylocal_document.img_path);
          } else {
            setarticle_avis_img_path("");
            setimg_img_article_file("");
          }


          if (mylocal_document.meta_description) {
            setarticle_avis_meta_description(mylocal_document.meta_description);
          } else {
            setarticle_avis_meta_description("");
          }


        } else {
          alert(" Aucun article recuperé");
        }


      } else if (String(res.data.status) === String("Err_Connexion")) {
        alert('Erreur: ' + res.data.message);
        history.push("/Connexion");
      }

      else {
        setGet_Partner_Article_Avis_Data_api("false");
        setGet_Partner_Article_Avis_Data_message(res.data.message);
        alert(res.data.message);
      }

    }).catch((error) => {
      setLoading(false);
      console.warn('Not good man :( Get_Partner_Article_Avis_Data = ', error);
      setGet_Partner_Article_Avis_Data_api("false");
      alert(" Impossible de recuperer les données de l'article");
      //setmyApimyApiMessage("")
    })
  }


  useEffect(() => {

    var local_title = "";
    if (props.article.title_formation && String(props.article.title_formation).length > 45) {
      local_title = String(props.article.title_formation).substring(0, 43) + " ...";

    } else {
      local_title = String(props.article.title_formation);

    }
    settitle_resized(local_title);



    var img_article = "";
    if (props.article.img_path && String(props.article.img_path).length > 10) {
      img_article = String(props.article.img_path)
      setarticle_img(img_article);

    } else {
      setarticle_img(img_met_digital);
    }


    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });

  }, []);


  const [Dialog_1_avis, setDialog_1_avis] = React.useState(false);
  const [Dialog_1_open, setDialog_1_open] = React.useState(false);
  function Dialog_1_handle_change_participant_session(avis) {
    setDialog_1_avis(avis);
    setDialog_1_open(true);
  }

  const Dialog_1_handleClose = () => {
    //alert(" Utiliser le bouton 'fermer' ");
    //setOpen(false);
  };

  const Dialog_1_handleClose_buton = () => {
    setDialog_1_open(false);
  };


  const [Dialog_article_avis_avis, setDialog_article_avis_avis] = React.useState(false);
  const [Dialog_article_avis_open, setDialog_article_avis_open] = React.useState(false);
  function Dialog_article_avis_handle_change_participant_session(avis) {
    setDialog_article_avis_avis(avis);
    setDialog_article_avis_open(true);
  }

  const Dialog_article_avis_handleClose = () => {

  };

  const Dialog_article_avis_handleClose_buton = () => {

    setDialog_article_avis_open(false);
    sethandleSubmission_img_article_message("");
    setlogo_file_name("");
    setimg_img_article_file("");
    setimg_img_article_file2("");
    clear_article_avis_fields();

  };

  function clear_article_avis_fields() {
    setarticle_avis_title_formation("");
    setarticle_avis_email("");
    setarticle_avis_url_formation("");
    setarticle_avis_sujet("");
    setarticle_avis_avis("");
    setis_data_changed("");
    setarticle_avis_meta_description("");
    setarticle_avis_display_header_img(false);
  }

  const [article_avis_date_publication, setarticle_avis_date_publication] = useState(new Date().toLocaleDateString('fr-FR'));
  const [article_avis_title_formation, setarticle_avis_title_formation] = React.useState("");
  const [article_avis_email, setarticle_avis_email] = React.useState("");
  const [article_avis_url_formation, setarticle_avis_url_formation] = React.useState("");
  const [article_avis_sujet, setarticle_avis_sujet] = React.useState("");
  const [article_avis_avis, setarticle_avis_avis] = React.useState("");
  const [article_avis_internal_url, setarticle_avis_internal_url] = React.useState("");
  const [article_avis_display_header_img, setarticle_avis_display_header_img] = React.useState(false);
  const [article_avis_img_path, setarticle_avis_img_path] = React.useState("");
  const [article_avis_meta_description, setarticle_avis_meta_description] = React.useState("");

  function Add_Update_Article_Avis() {

    var form = new FormData();

    const stored_cookie = getCookie('tokenmysypart');
    form.append("token", stored_cookie);
    form.append("title_formation", article_avis_title_formation);
    form.append("avis", field_texte_avis);
    form.append("qualite", "");
    form.append("note", "");


    if (img_img_article_file2) {
      form.append('File', img_img_article_file2);
      form.append('img_file_name', img_img_article_file2.name);
    }
    else {
      form.append('File', "");
      form.append('img_file_name', "");
    }


    if (!article_avis_img_path || String(article_avis_img_path).trim() === "") {
      alert(" Vous devez saisir une image à afficher avec l'article ");
      return;
    }
    form.append("img_path", article_avis_img_path);

    if (article_avis_date_publication.trim() === "") {
      alert(" Vous devez saisir la date de naissance de l'apprenant");
      return;
    }

    var formated_date_tmp = new Date(moment(article_avis_date_publication, "YYYY-MM-DD"));
    var formated_date_final = moment(formated_date_tmp).format('DD/MM/YYYY');

    form.append("date_publication", formated_date_final);


    if (article_avis_display_header_img) {
      form.append("display_header_img", "1");
    } else {
      form.append("display_header_img", "0");
    }

    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);

    // Si une balise meta description n'est pas fourni, alors on lui donne le titre
    var local_meta_description = "";
    if (article_avis_meta_description) {
      local_meta_description = String(article_avis_meta_description).trim().toLocaleLowerCase().substring(0, 200);
    } else {
      local_meta_description = String(article_avis_title_formation).trim().toLocaleLowerCase().substring(0, 200);
    }
    form.append("meta_description", local_meta_description);

    setLoading(true);

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

    if (selected_id && String(selected_id).length > 3) {
      myurl = process.env.REACT_APP_API_URL + "myclass/api/update_articles_avis/";
      form.append("_id", selected_id);
    } else {
      myurl = process.env.REACT_APP_API_URL + "myclass/api/add_articles_avis/";
    }


    axios.post(myurl, form).then(res => {
      setLoading(false);
      if (String(res.data.status) === String("false")) {
        alert(res.data.message);
      }

      else if (String(res.data.status) === String("true")) {
        alert(res.data.message);
        Dialog_article_avis_handleClose_buton();
        window.location.reload();

      }
      else {

      }
    }).catch((error) => {
      setLoading(false);
      console.warn('contact-nous  Not good man :( mysearchtext = ');


    })
  }


  const [Delete_Article_Avis_Data_api, setDelete_Article_Avis_Data_api] = useState();
  const [Delete_Article_Avis_Data_message, setDelete_Article_Avis_Data_message] = useState();
  const [Delete_Article_Avis_Data_result, setDelete_Article_Avis_Data_result] = useState();
  function Delete_Article_Avis_Data(article_id) {

    var form = new FormData();
    //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");


    const stored_cookie = getCookie('tokenmysypart');
    form.append("token", stored_cookie);
    form.append("_id", article_id);


    var myurl = process.env.REACT_APP_API_URL + "myclass/api/delete_articles_avis_from_id/";
    setLoading(true);
    axios.post(myurl, form).then(res => {
      setLoading(false);
      //console.log(" In Delete_Article_Avis_Data  res.data.status = " + res.data.status);
      //console.log(" In Delete_Article_Avis_Data  res.data.message r_class = " + res.data.message);

      if (String(res.data.status) === String("true")) {
        alert(res.data.message);
        window.location.reload();
      }
      else {
        setDelete_Article_Avis_Data_api("false");
        setDelete_Article_Avis_Data_message(res.data.message);
        alert(res.data.message);

      }

    }).catch((error) => {
      setLoading(false);
      console.warn('Delete_Article_Avis_Data : Not good man :( mysearchtext = ' + error);
      setDelete_Article_Avis_Data_api("false");
      alert(" Impossible de supprimer le document");
    })
  }


  /**** Gestion image de l'article */

  const [logo_file_name, setlogo_file_name] = useState();
  const hiddenFileInput_logo = React.useRef(null);

  const [GetLms_Themes_img_article_Img, setGetLms_Themes_img_article_Img] = useState("");

  const [handleSubmission_img_article_api, sethandleSubmission_img_article_api] = useState();
  const [handleSubmission_img_article_result, sethandleSubmission_img_article_result] = useState();
  const [handleSubmission_img_article_message, sethandleSubmission_img_article_message] = useState();


  const [img_img_article_file, setimg_img_article_file] = useState();
  const [img_bg_file, setimg_bg_file] = useState();

  const [img_img_article_file2, setimg_img_article_file2] = useState();
  const [img_bg_file2, setimg_bg_file2] = useState();

  const handleSubmission_logo = event => {
    clear_message();
    setis_data_changed("1");

    const fileUploaded = event.target.files[0];
    let file_size = event.target.files[0].size;
    let file_type = event.target.files[0].type;

    //console.log("file_size =  ", file_size, " file_type = ", file_type);
    //console.log(" fileUploaded = ", fileUploaded);
    if (file_size > 1000000) {
      alert("Le fichier ne doit pas dépasser un 1 Méga octets");
      return;
    }

    //image/png
    if (String(file_type) !== "image/png" && String(file_type) !== "image/jpg" && String(file_type) !== "image/webp" &&
      String(file_type) !== "image/jpeg") {
      alert("Le fichier n'est pas au format PNG");
      return;
    }

    setLoading(true);

    var _URL = window.URL || window.webkitURL;
    var file, img;
    var img_height, img_width;

    if ((file = event.target.files[0])) {
      img = new Image();
      var objectUrl = _URL.createObjectURL(file);
      img.onload = function () {
        img_height = this.height;
        img_width = this.width;
        _URL.revokeObjectURL(objectUrl);
        console.log(" img_width = ", img_width, "  img_height = ", img_height)

        if (parseFloat(img_width) > 130 && parseFloat(img_width) < 1100 &&
          parseFloat(img_height) > 130 && parseFloat(img_height) < 1100) {
          //console.log(" img_height est = ", img_height, " < à 1500 ");

          // Verification que le nom du fichier est alpha numerique
          /*var regExp = /^[A-Za-z0-9]+$/;
          if (!regExp.test(event.target.files[0].name)) {
              sethandleSubmission_img_article_message(" Le nom de l'image comporte des caractères non alphanumériques");
              sethandleSubmission_img_article_api("false");
              setLoading(false);
 
              return
          }*/


          if (String(event.target.files[0].name).length > 50) {
            sethandleSubmission_img_article_message(" Le nom du fichier est trop long. il doit faire moins de 50 caractère");
            sethandleSubmission_img_article_api("false");
            setLoading(false);

            return
          }

          setlogo_file_name(event.target.files[0].name);
          setimg_img_article_file(URL.createObjectURL(event.target.files[0]));
          setimg_img_article_file2(event.target.files[0]);

        } else {
          sethandleSubmission_img_article_message(" La taille de l'image est incorrecte.  Larg = " + String(img_width) + " px Long = " + String(img_height) + " px");
          sethandleSubmission_img_article_api("false");
          setLoading(false);
          return;
        }

        //console.log(" after img_width = ", img_width, "  after img_height = ", img_height)
      };
      img.src = objectUrl;

    }
    setLoading(false);
  };

  function clear_message() {
    sethandleSubmission_img_article_message();
    sethandleSubmission_img_article_api();
  }


  const [Send_img_article_Img_api, setSend_img_article_Img_api] = useState();
  const [Send_img_article_Img_result, setSend_img_article_Img_result] = useState();
  const [Send_img_article_Img_message, setSend_img_article_Img_message] = useState();
  function Send_img_article_Img() {
    clear_message();
    setLoading(true);
    const formData = new FormData();
    formData.append('File', img_img_article_file2);
    //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
    const stored_cookie = getCookie('tokenmysypart');
    formData.append("token", stored_cookie);

    console.log(" ## le nom du fichier est : ", img_img_article_file2.name);

    fetch(
      process.env.REACT_APP_API_URL + "myclass/api/Blog_Img_Store_Article_Image/",
      {
        method: 'POST',
        body: formData,
      }
    )
      .then((response) => response.json())
      .then((result) => {
        //console.log('Success:', result['message']);

        if (String(result['status']) === String("true")) {
          setSend_img_article_Img_api("true");
          alert(" La mise à jour du logo a été correctement effectuée. ");

        } else if (String(result['status']) === String("Err_Connexion")) {
          alert('Erreur: ' + result['message']);
          history.push("/Connexion");
        }

        else {
          setSend_img_article_Img_api("false");
          setSend_img_article_Img_message(result['message']);
        }
        setLoading(false);

      })
      .catch((error) => {
        console.error('Error:', error);
        setSend_img_article_Img_api("false");

        setLoading(false);
      });

  }


  const [Delete_img_article_Img_api, setDelete_img_article_Img_api] = useState();
  const [Delete_img_article_Img_result, setDelete_img_article_Img_result] = useState();
  const [Delete_img_article_Img_message, setDelete_img_article_Img_message] = useState();
  function Delete_img_article_Img() {
    clear_message();


    setLoading(true);


    const formData = new FormData();

    //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
    const stored_cookie = getCookie('tokenmysypart');
    formData.append("token", stored_cookie);


    fetch(
      process.env.REACT_APP_API_URL + "myclass/api/Lms_Delete_img_article_File/",
      {
        method: 'POST',
        body: formData,
      }
    )
      .then((response) => response.json())
      .then((result) => {
        //console.log('Success:', result['message']);

        if (String(result['status']) === String("true")) {
          setDelete_img_article_Img_api("true");
          setGetLms_Themes_img_article_Img('');
          alert(" Le logo a été correctement supprimé ");

        } else if (String(result['status']) === String("Err_Connexion")) {
          alert('Erreur: ' + result['message']);
          history.push("/Connexion");
        }

        else {
          setDelete_img_article_Img_api("false");
          setDelete_img_article_Img_message(result['message']);
        }
        setLoading(false);

      })
      .catch((error) => {
        console.error('Error:', error);
        setDelete_img_article_Img_api("false");
        setDelete_img_article_Img_message(" Impossible de supprimer le fichier logo");
        setLoading(false);
      });

  }

  const changeHandler2_logo = (event) => {
    clear_message();
    hiddenFileInput_logo.current.click();
  };

  function Annule_img_article_img() {
    clear_message();
    setimg_img_article_file();
    setimg_img_article_file2();
    sethandleSubmission_img_article_message();
    setSend_img_article_Img_api();
    setSend_img_article_Img_message();
    setlogo_file_name();
  }

  /***** Fin gestion de l'image de l'article */

  // Prevent Bootstrap dialog from blocking focusin
  document.addEventListener('focusin', (e) => {
    if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
      e.stopImmediatePropagation();
    }
  });

  return (

    <div className="new_s_article_2025">



      {/***   GESTION article */}
      <Dialog
        open={Dialog_article_avis_open}
        //  onClose={Dialog_article_avis_handleClose}
        className="displaypartnersession"
        static
        onClose={() => null}

        PaperProps={{


          className: classes.paper, // Apply the paper style
          style: {
            overflowY: 'unset',
            position: 'absolute',
            top: '5rem',
            margin: "2px",
          },
        }}
        hideBackdrop={true}
        disableScrollLock
        classes={{
          paper: classes.dialog
        }}

        PaperComponent={PaperComponent}
        aria-labelledby="draggable-dialog-title"
      >

        <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily:'DM Sans'}} id="draggable-dialog-title"> Votre article </DialogTitle>
        <DialogContent className="DialogContent_width DialogContent_width_session_800px" >


          {String(is_data_changed) === String("1") && <div className="div_row_dialog">
            <div className="koUpdateData" style={{ "color": "orange", "textAlign": "center" }}> /!\ Pensez à enregistrer les modifications</div>
          </div>}

          <div className="div_row_dialog">
            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
              <b> Titre </b>
            </div>
            <div className="div_row_dialog" >
              <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
                <input
                  type='text'
                  name='name'
                  value={article_avis_title_formation}
                  onChange={(e) => {
                    setarticle_avis_title_formation(e.target.value);
                    setis_data_changed("1");
                  }}
                  className='disabled_style_width_100_percent'

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



          <div className="div_row_dialog">
            <div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', paddingTop: '15px' }}>
              <b>   Date publication </b>
            </div>


            <div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
              <DatePicker
                name="date_publication"
                id="date_publication"
                selected={new Date(moment(article_avis_date_publication, "YYYY-MM-DD"))}
                onChange={(date) => {
                  setarticle_avis_date_publication(format(date, 'yyyy-MM-dd'));
                  setis_data_changed("1");
                }
                }
                showTimeSelect={false}
                dateFormat="dd/MM/yyyy"
                className="disabled_style session_caract_Dialog_DatePicker"
              />
            </div>
          </div>

          <div className="div_row_dialog">
            <div className="div_row_gauche_dialog_session" style={{ "textAlign": 'left', paddingTop: '15px' }}>
              <b>   Affiche image </b>
            </div>
            <div className="div_row_droite_dialog_session" style={{ "textAlign": 'right' }}>
              <Checkbox
                name="document_join_pdf"
                className="disabled_style session_caract_Dialog_DatePicker"
                checked={article_avis_display_header_img}
                onChange={(e) => {
                  setarticle_avis_display_header_img(e.target.checked);
                  setis_data_changed("1");
                }}

              />

            </div>
          </div>
          <div className="div_row_dialog">
            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
              <b> Image Url </b>
            </div>
            <div className="div_row_dialog" >

              <div className="div_row_dialog" >
                <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
                  <input
                    type='text'
                    name='img_url'
                    id='img_url'
                    value={article_avis_img_path}
                    className='disabled_style_width_100_percent'
                    disabled

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

            </div>
          </div>

          <div className="div_row_dialog">
            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
              <b> Image  </b>
            </div>

            <div className="div_row_dialog" >

              <div className="div_row">

                <nav className="koUpdateData" style={{ "color": "orange" }}>

                </nav>
                {logo_file_name && <nav className="okUpdateData"><i>{logo_file_name}</i></nav>}
                <input type="file"
                  accept=".png, .jpg, .webp"
                  ref={hiddenFileInput_logo}
                  style={{ display: 'none' }}
                  name="liste_formation_file"
                  onChange={handleSubmission_logo}
                />

                {img_img_article_file && <nav> Fichier à importer : {img_img_article_file.name}  <br />
                  <nav style={{ maxWidth: '20rem', margin: 'auto' }}>
                    <img src={img_img_article_file} style={{ "width": "100%" }} />
                  </nav>


                  <br />
                </nav>}

                {String(Send_img_article_Img_api) === "true" && <div className="okUpdateData"> La mise à jour a été correctement faite</div>}
                {String(Send_img_article_Img_api) === "false" && <div className="koUpdateData"> {Send_img_article_Img_message}</div>}

                {String(handleSubmission_img_article_api) === "false" && <div className="koUpdateData"> {handleSubmission_img_article_message}</div>}

                <br />
                <Tooltip className="tooltip_css" id="tooltip_taille_img" />
                <a data-tooltip-id="tooltip_taille_img" data-tooltip-html=" <i> longueur  entre  200px et 1000px  et largeur entre 200px et 1000px, au format PNG ou JPG <br />
                      Le nom du fichier ne contient que des caractères alphanumériques, sans espaces </i>">
                  <Button variant="outlined" onClick={changeHandler2_logo} className="detail_class_submenu" style={{
                    "background": "#c8cfd5",
                    "minWidth": "15rem", "color": "black", "width": "auto"
                  }}
                    id='menu_import_formation' name='menu_import_formation'>Choisir une image  &nbsp; <FcInfo style={{ fontSize: "14px" }} /> <br />

                  </Button>
                </a>
                <br />

              </div>



            </div>
          </div>


          <div className="div_row_dialog">
            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
              <b> Meta description </b>
              <div className="div_row_dialog" >

                <TextField
                  maxRows={4}
                  minRows={3}
                  inputProps={{ maxLength: 200 }}
                  multiline
                  sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}

                  name="meta_description"
                  id="meta_description"

                  fullWidth

                  value={article_avis_meta_description}
                  onChange={(e) => {
                    setarticle_avis_meta_description(e.target.value);
                    setis_data_changed("1");
                  }
                  }


                />
              </div>

            </div>

          </div>

          <div className="div_row_dialog">
            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
              <b> Texte Article</b>
            </div>
            <div className="div_row_dialog" >

              <Editor
                id="detail_document_principal"
                name="detail_document_principal"
                onInit={(evt, editor) => editorRef_texte_avis.current = editor}
                // initialValue={field_texte_avis}

                onKeyUp={editor_keyup}
                value={field_texte_avis}
                onEditorChange={(newValue, editor) => {
                  setfield_texte_avis(editorRef_texte_avis.current.getContent());
                  setis_data_changed("1");

                }}
                init={{
                  resize: false,
                  height: 700,
                  menubar: true,
                  plugins: [
                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor', 'searchreplace',
                    'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'paste', 'code', 'help', 'wordcount',
                    'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',

                  ],
                  toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
                    'alignleft aligncenter alignright alignjustify | ' +
                    'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',

                  content_style: 'body { font-family:DM Sans,sans-serif; font-size:14px; }'
                }}
              />

            </div>

            {String(is_data_changed) === String("1") && <div className="div_row_dialog">
              <div className="koUpdateData" style={{ "color": "orange", "textAlign": "center" }}> /!\ Pensez à enregistrer les modifications</div>
            </div>}

            <button onClick={(e) => {

              if (document.getElementsByName('one_detail_document_principal') && document.getElementsByName('one_detail_document_principal')[0])
                document.getElementsByName('one_detail_document_principal')[0].focus();
            }}> editer </button>

          </div>



        </DialogContent>

        <DialogActions>
          <IconButton
            autoFocus
            onClick={Dialog_article_avis_handleClose_buton}
            color="primary"
            className={classes.customizedButton}
          >
            <CancelPresentationIcon />
          </IconButton>
          <div className="div_row">
            <div className="div_row_gauche">
              <Button onClick={Dialog_article_avis_handleClose_buton} className="bton_annule_dialog" style={{ textAlign: "center" }}>Fermer &nbsp;</Button>
            </div>
            <div className="div_row_droite" style={{ "textAlign": 'center' }}>
              <Button onClick={Add_Update_Article_Avis} className="bton_enreg_dialog">Enregistrer &nbsp; </Button>

            </div>
          </div>

        </DialogActions>


      </Dialog>
      {/***  FIN GESTION article */}


      <div className="div_row">


        <div className="div_row_border" >
          <div style={{ "width": "100%", textAlign: "center", }}>
            <div style={{ maxWidth: '350px', marginLeft: 'auto', marginRight: 'auto' }}>
              <div className="gauche_img">
                <img src={article_img} alt={props.article.title_formation} className="img_categorie" id="projets" />
              </div>

              <div className="droite_txt">
                <div className="met_text" id="projets" onClick={(e) => {
                  e.preventDefault();
                  window.location.href = "/Display-Detail-Article/" + props.article.internal_url
                }} style={{
                  cursor: "pointer"
                }} >   {title_resized} </div>

                <div className="met_text_detail" >


                  <div className="art_criteres_value">

                    {parse(String(props.article.avis).replace(/(<([^>]+)>)/ig, ''))}

                  </div>


                </div>
                <div style={{
                  width: '100%', "textAlign": "right", paddingRight: "10px", float: "left", height: "2rem",
                  fontStyle: "italic"
                }}>  {(String(props.article.date_publication)).substring(0, 10)}
                </div>

                <div className="grid8p" onClick={(e) => {
                  e.preventDefault();
                  window.location.href = "/Display-Detail-Article/" + props.article.internal_url
                }}> En savoir plus  &nbsp; <FcRightUp style={{color: "#005e5d"}}/>
                </div>



                {props.connected_user_article_avis_droit_modif === "1" && <div style={{ "width": "100%", "float": "left" }} onClick={(e) => {
                  e.preventDefault();

                }}>
                  <nav style={{
                    "width": "40%", "float": "left", "textAlign": "left", "paddingLeft": "2px", "paddingRight": "2px",
                  }}
                  >


                    <Box sx={{ '& > :not(style)': { m: 1 }, }} onClick={(e) => {
                      setarticle_avis_title_formation(props.article.title_formation);
                      // setarticle_avis_avis(props.article.avis);
                      // setfield_texte_avis_initial_value(props.article.avis);
                      setarticle_avis_date_publication(moment((String(props.article.date_avis)).substring(0, 10)).format('YYYY-MM-DD'))

                      Get_Partner_Article_Avis_Data();
                      setedit_article("1");
                      setis_data_changed("");
                      setDialog_article_avis_open(true);

                    }}>
                      <Fab size="small" color="primary" aria-label="edit" variant="extended">
                        <EditIcon sx={{ pr: 1 }} /> Edit
                      </Fab>
                    </Box> </nav>


                  <nav style={{ "width": "40%", "float": "right", "textAlign": "right", "paddingLeft": "2px", "paddingRight": "2px" }} >
                    <Popup
                      trigger={
                        <Box sx={{ '& > :not(style)': { m: 1 }, }} onClick={(e) => {


                        }}>
                          <Fab size="small" color="warning" aria-label="edit" variant="extended">
                            <MdDeleteForever sx={{ pr: 1 }} /> <font style={{ "fontsize": "9px" }}> Supr </font>
                          </Fab>
                        </Box>
                      }
                      modal
                      nested
                      position="center center"
                    >
                      {close => (
                        <div>
                          <button className="gest_close" onClick={close}>
                            &times;
                          </button>
                          <div className="gest_header"> MySy Information </div>
                          <div className="gest_content">
                            {' '}

                            En confirmant cette opération, le document sera <i><font color="red"> définitivement supprimé</font></i>. <br />

                          </div>
                          <div className="gest_actions">
                            <div style={{ "width": "45%", "float": "left" }}>
                              <button className="gest_bton_popup" onClick={(event) => {
                                Delete_Article_Avis_Data(props.article._id);
                                close();
                              }}> Valider </button>

                            </div>
                            <div style={{ "width": "45%", "float": "right" }}>
                              <button
                                className="gest_bton_popup"
                                onClick={() => {
                                  console.log('modal closed ');
                                  close();
                                }}
                              >
                                Annuler
                              </button>
                            </div>
                          </div>
                        </div>
                      )}
                    </Popup>
                  </nav>

                </div>}


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



    </div>
  )
}


export default New_Article_2025;