import React, { useRef, useState, useMemo, useEffect } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";
import Articles from "../components/Article";
import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa';
import { format } from 'date-fns'
import moment from "moment";
import Pagination from "./TestPagination";
import data from "./data/mock-data.json";
import { useHistory } from "react-router-dom";
import { getCookie, removeCookie } from 'react-use-cookie';
import { Helmet } from "react-helmet";
import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
import Button from '@mui/material/Button';

import { confirmAlert } from 'react-confirm-alert'; // Import
import { useCookies } from "react-cookie";
import connect_white from "../mysy_img/connect_white_v2.png";
import connect_green from "../mysy_img/connect_green.png";
import { BsFillXCircleFill } from "react-icons/bs";
import Fotter_v3 from "./Fotter_v3";

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 SendIcon from '@mui/icons-material/Send';
import { Editor } from '@tinymce/tinymce-react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { FcInfo } from "react-icons/fc";
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip } from 'react-tooltip'
import Checkbox from '@mui/material/Checkbox';


import { FcPlus } from "react-icons/fc";
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

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



let PageSize = 5;
const RechercheArticles_new_v2 = (props) => {
    const classes = useStyles();
    const [userconnected, setuserconnected] = useState("");
    const [SearchText, setSearchText] = useState("");
    const [result, setResult] = useState("");
    const [myApiResponse, setmyApiResponse] = useState("false");
    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 [userIp, setuserIp] = useState("");
    const [currentPage, setCurrentPage] = useState(1);
    const [currentPage2, setCurrentPage2] = useState(1);
    const [fin, setfin] = useState(0);
    const [ismobilephone, setismobilephone] = useState();
    const [TrainingDistanciel, setTrainingDistanciel] = useState();


    const stored_user = getCookie('tokenmysych');
    const history = useHistory();


    const url = process.env.REACT_APP_API_URL + "myclass/api/add_user_account/";
    const {
        register,
        formState: { errors },
        handleSubmit,
        watch,
    } = useForm();
    const pwd = useRef({});
    pwd.current = watch("pwd", "");

    const onSubmit = async (data) => {
        const formData = new FormData();
        //await sleep(20);
        formData.append('search_text', data.name);
        formData.append('name', data.name);
        formData.append('surname', data.surname);
        formData.append('email', data.email);
        formData.append('pwd', data.pwd);
        const res = await fetch(
            url,
            {
                method: "POST",
                mode: 'cors',
                cache: 'no-cache',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json'
                    // 'Content-Type': 'application/x-www-form-urlencoded',
                },
                redirect: 'follow',
                referrerPolicy: 'no-referrer',
                body: formData,
            }
        );
        const results = await res.json();
        //console.log(results);
    };

    const [Trainingdistance, setTrainingdistance] = useState(0);
    const handleInput = (e) => {
        setTrainingdistance(e.target.value);
    }

    const [Trainingduration, setTrainingduration] = useState(0);
    const handleInputDuration = (e) => {
        setTrainingduration(e.target.value);
    }


    function showdisplayfilter(event) {

        if (showelement == "true") {
            setshowelement("false");
        }
        else if (showelement == "false") {
            setshowelement("true");
        }


    }

    function clearsearchtext(event) {
        setSearchText("");
        document.getElementById("SearchText").value = "";
    }


    function SearchTextHandle(event) {
        setSearchText(event.target.value);
    }



    function displayAllClassesHandle(event) {

        setdisplayAllClasses(event.target.checked);
        if (event.target.checked == true)
            document.getElementById("SearchText").disabled = true;
        else
            document.getElementById("SearchText").disabled = false;
    }


    const [get_all_articles_avis_api, setget_all_articles_avis_api] = useState();
    const [get_all_articles_avis_message, setget_all_articles_avis_message] = useState();
    const [get_all_articles_avis_result, setget_all_articles_avis_result] = useState([]);
    function get_all_articles_avis(e) {

        var token = "";
        if (typeof (stored_user) != "undefined") {
            token = stored_user
        }


        var form = new FormData();
        form.append("search_text", SearchText);
        form.append("token", 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 = ""
        /* if (document.getElementById("allelement").checked !== true &&
  document.getElementById("SearchText").disabled !== true) {
  //alert(" recherche classique laaa ");
  myurl = process.env.REACT_APP_API_URL + "myclass/api/recherche_articles_avis/";
         }
         else if (document.getElementById("allelement").checked === true &&
  document.getElementById("SearchText").disabled === true) {
  myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_articles_avis/";
         }*/
        myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_articles_avis/";

        axios.post(myurl, form).then(res => {
            if (String(res.data.status) != String("false")) {
                //console.log(" In get_all_articles_avis  res.data.status = " + res.data.status);
                //console.log(" In get_all_articles_avis  res.data.message = " + res.data.message);
                setget_all_articles_avis_api(res.data.status);
                setget_all_articles_avis_result(res.data.message);
                setmyApiResponse("True");
                setResult(res.data.message)

            }
            else {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setmyApiResponse("False");
                setget_all_articles_avis_api(res.data.status);
                setget_all_articles_avis_message(res.data.message);
                //setmyApimyApiMessage("")
            }


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


    const [get_all_published_articles_avis_api, setget_all_published_articles_avis_api] = useState();
    const [get_all_published_articles_avis_message, setget_all_published_articles_avis_message] = useState();
    const [get_all_published_articles_avis_result, setget_all_published_articles_avis_result] = useState([]);
    function get_all_published_articles_avis(e) {

        var token = "";
        if (typeof (stored_user) != "undefined") {
            token = stored_user
        }


        var form = new FormData();
        form.append("search_text", SearchText);
        form.append("token", 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 = ""
        /* if (document.getElementById("allelement").checked !== true &&
  document.getElementById("SearchText").disabled !== true) {
  //alert(" recherche classique laaa ");
  myurl = process.env.REACT_APP_API_URL + "myclass/api/recherche_articles_avis/";
         }
         else if (document.getElementById("allelement").checked === true &&
  document.getElementById("SearchText").disabled === true) {
  myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_published_articles_avis/";
         }*/
        myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_published_articles_avis/";

        axios.post(myurl, form).then(res => {
            if (String(res.data.status) != String("false")) {
                //console.log(" In get_all_published_articles_avis  res.data.status = " + res.data.status);
                //console.log(" In get_all_published_articles_avis  res.data.message = " + res.data.message);
                setget_all_published_articles_avis_api(res.data.status);
                setget_all_published_articles_avis_result(res.data.message);
                setmyApiResponse("True");


            }
            else {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setmyApiResponse("False");
                setget_all_published_articles_avis_api(res.data.status);
                setget_all_published_articles_avis_message(res.data.message);
                //setmyApimyApiMessage("")
            }


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



    const [get_all_non_published_articles_avis_api, setget_all_non_published_articles_avis_api] = useState();
    const [get_all_non_published_articles_avis_message, setget_all_non_published_articles_avis_message] = useState();
    const [get_all_non_published_articles_avis_result, setget_all_non_published_articles_avis_result] = useState([]);
    function get_all_non_published_articles_avis(e) {

        var token = "";
        if (typeof (stored_user) != "undefined") {
            token = stored_user
        }


        var form = new FormData();
        form.append("search_text", SearchText);
        form.append("token", 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 = ""
        /* if (document.getElementById("allelement").checked !== true &&
  document.getElementById("SearchText").disabled !== true) {
  //alert(" recherche classique laaa ");
  myurl = process.env.REACT_APP_API_URL + "myclass/api/recherche_articles_avis/";
         }
         else if (document.getElementById("allelement").checked === true &&
  document.getElementById("SearchText").disabled === true) {
  myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_non_published_articles_avis/";
         }*/
        myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_non_published_articles_avis/";

        axios.post(myurl, form).then(res => {
            if (String(res.data.status) != String("false")) {
                //console.log(" In get_all_non_published_articles_avis  res.data.status = " + res.data.status);
                //console.log(" In get_all_non_published_articles_avis  res.data.message = " + res.data.message);
                setget_all_non_published_articles_avis_api(res.data.status);
                setget_all_non_published_articles_avis_result(res.data.message);
                setmyApiResponse("True");


            }
            else {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setmyApiResponse("False");
                setget_all_non_published_articles_avis_api(res.data.status);
                setget_all_non_published_articles_avis_message(res.data.message);
                //setmyApimyApiMessage("")
            }


        }).catch((error) => {
            console.warn('Not good man :( mysearchtext = ');
            setmyApiResponse("False");
            setget_all_non_published_articles_avis_api("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]);


    const [PartnerMenu, setPartnerMenu] = React.useState(null);
    const [AccountMenu, setAccountMenu] = React.useState(null);

    const [someoneconnected, setsomeoneconnected] = useState("0");
    const [partnerconnected, setpartnerconnected] = useState("0");
    const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);

    const stored_part = getCookie('tokenmysypart');


    const [connected_user_article_avis_droit_modif, setconnected_user_article_avis_droit_modif] = useState("0");


    function whosisconnected() {
        var local_user_connect = 0;
        var local_part_connect = 0;

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

            //alert(" user connected OK");
        }

        if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
            setpartnerconnected("0");
            local_part_connect = 0;
        } else {
            setpartnerconnected("1");
            setsomeoneconnected("1");
            local_part_connect = 1;
            retrieve_user_acces_right();


            // alert(" partner connected OK");
        }
    }

    function handleAccountLogout() {

        if (String(userconnected) === String("1")) {
            user_logout();
        }
        else if (String(partnerconnected) === String("1")) {
            part_logout();
        }
    }

    function user_logout_confirmation() {
        /* si c'est une connexion partner qui est active */
        if (typeof (stored_user) != "undefined") {
            setCookie("tokenmysych", "");
        }
        history.push("/recherche-formation");
    }

    function user_logout() {
        confirmAlert({
            title: '',
            message: 'Confirmez la deconnexion (user)',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => user_logout_confirmation()
                },
                {
                    label: 'Non',
                    onClick: () => { return }
                }
            ]
        });
    }


    const PartnerMenu_Close = () => {
        setPartnerMenu(null);
    };

    const AccountMenu_Close = () => {
        setAccountMenu(null);
    };

    const handlePartnerMenu = (event) => {
        setPartnerMenu(event.currentTarget);
    };

    const handleAccountMenu = (event) => {
        setAccountMenu(event.currentTarget);
    };

    const handleClose_Account = () => {
        alert(" my account");
        setAccountMenu(null);
    };

    const handleAccountConnexion = () => {
        setAccountMenu(null);
        history.push("/Connexion")
    };

    const handleMyAccount = () => {
        setAccountMenu(null);
        history.push("/mysy-user-account")
    };

    const handleAccountCreation = () => {
        setAccountMenu(null);
        history.push("/create_account")
    };

    const handlePartnerConnexion = () => {
        setAccountMenu(null);
        history.push("/PartnerLogin")
    };

    function user_logout_confirmation() {
        /* si c'est une connexion partner qui est active */
        if (typeof (stored_user) != "undefined") {
            setCookie("tokenmysych", "");
        }
        history.push("/recherche-formation");
    }

    function user_logout() {
        confirmAlert({
            title: '',
            message: 'Confirmez la deconnexion (user)',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => user_logout_confirmation()
                },
                {
                    label: 'Non',
                    onClick: () => { return }
                }
            ]
        });
    }


    const handleMyPartnerAccount = () => {
        setAccountMenu(null);
        history.push("/Partner")
    };

    const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']);
    function handleAccountConnexion_v2() {

        if (String(userconnected) === String("1")) {
            handleMyAccount();
        }
        else if (String(partnerconnected) === String("1")) {
            handleMyPartnerAccount();
        }
    }


    function part_logout_confirmation() {
        /* si c'est une connexion partner qui est active */
        if (typeof (stored_part) != "undefined") {

            const stored_cookie = getCookie('tokenmysypart');
            var acces_right_token_name = stored_cookie + "_uar";

            setpartCookie("tokenmysypart", "", { path: '/' });

            setpartCookie(acces_right_token_name, "", { path: '/' });
            removeCookie(acces_right_token_name, { path: '/' });
        }
        history.push("/recherche-formation");
    }

    function part_logout() {
        confirmAlert({
            title: '',
            message: 'Confirmez la deconnexion (pro)',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => part_logout_confirmation()
                },
                {
                    label: 'Non',
                    onClick: () => { return }
                }
            ]
        });
    }
    const [ProduitMenu, setproduitMenu] = React.useState(null);
    const [AvisMenu, setavisMenu] = React.useState(null);


    const handleProduitMenu = (event) => {
        setproduitMenu(event.currentTarget);
    };

    const handleProduitService = () => {
        setproduitMenu(null);
        history.push("/tarifs_produits_services/")
    };

    const handleQuisommesNousMenu = () => {
        setproduitMenu(null);
        history.push("/qui-sommes-nous/")
    };

    const ProduitMenu_Close = () => {
        setproduitMenu(null);
    };

    function publiecatalogue() {
        history.push("/Partner", { mysy_arg: 'partner' });
    }

    const handleFtionMenu = (event) => {
        history.push("/")
    };

    useEffect(() => {
        setdisplayAllClasses("true");
        async function chloadfunction() {
            if (document.getElementById('allelement')) {
                document.getElementById("allelement").checked = true;
            }
            // document.getElementById("SearchText").disabled = true;

        }
        chloadfunction();
        get_all_published_articles_avis();
        whosisconnected();

    }, []);



    // Cette fonction recuperer les droits d'acces stocké en cookie
    const [connected_user_access_right, setconnected_user_access_right] = React.useState([]);
    function retrieve_user_acces_right() {
        const stored_cookie = getCookie('tokenmysypart');

        if (!stored_cookie || String(stored_cookie).trim() === "") {
            history.push("/Connexion");
            return;
        }

        var acces_right_token_name = stored_cookie + "_uar";
        var acces_right_token_val = getCookie(acces_right_token_name, { path: '/' });

        var tab_json_access_right = JSON.parse(acces_right_token_val);

        setconnected_user_access_right(tab_json_access_right);


        var article_avis_droit_ecriture_retval = check_user_acces_right_with_tab("article_avis", "write", tab_json_access_right);
        if (article_avis_droit_ecriture_retval === 1) {
            setconnected_user_article_avis_droit_modif("1");
        } else {
            setconnected_user_article_avis_droit_modif("0");
        }


    }

    // check du droit d'acces de l'utilisateur
    function check_user_acces_right(local_module, local_action) {

        //console.log(" ### connected_user_access_right = ", connected_user_access_right);
        //console.log(" #### check_user_acces_right = ", local_module, " --- local_action = ", local_action);

        if (String(local_action) === "read") {
            for (let i = 0; i < connected_user_access_right.length; i++) {
                if (String(connected_user_access_right[i].module) === String(local_module)
                    && String(connected_user_access_right[i].read) === "true") {

                    return 1;
                }
            }
            return 0;
        } else if (String(local_action) === "write") {
            for (let i = 0; i < connected_user_access_right.length; i++) {
                if (String(connected_user_access_right[i].module) === String(local_module)
                    && String(connected_user_access_right[i].write) === "true") {

                    return 1;
                }
            }
            return 0;
        } else {
            return 0;
        }

    }


    // check du droit d'acces de l'utilisateur avec la table des droits
    function check_user_acces_right_with_tab(local_module, local_action, tab_acces_right) {

        //console.log(" ### connected_user_access_right = ", connected_user_access_right);
        //console.log(" #### check_user_acces_right = ", local_module, " --- local_action = ", local_action);

        if (String(local_action) === "read") {
            for (let i = 0; i < tab_acces_right.length; i++) {
                if (String(tab_acces_right[i].module) === String(local_module)
                    && String(tab_acces_right[i].read) === "true") {

                    return 1;
                }
            }
            return 0;
        } else if (String(local_action) === "write") {
            for (let i = 0; i < tab_acces_right.length; i++) {
                if (String(tab_acces_right[i].module) === String(local_module)
                    && String(tab_acces_right[i].write) === "true") {

                    return 1;
                }
            }
            return 0;
        } else {
            return 0;
        }

    }




    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();
        setfield_texte_avis("");


    };

    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_internal_url("");
        setarticle_avis_display_header_img(false);
        setarticle_avis_meta_description("");
        setfield_texte_avis("");
    }

    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(e) {

        clear_message();
        setLoading(true);

        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 (article_avis_internal_url && String(article_avis_internal_url).trim().length > 5) {
            form.append("internal_url", article_avis_internal_url);
        }

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


        //  console.log(" ## form = ", form);
        var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_articles_avis/";

        setLoading(true);

        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 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 New_Option_Filter = [
        { "id": "published", "label": "Publié", "value": "published" },
        { "id": "notpublished", "label": "Non Publié", "value": "notpublished" },
        { "id": "all", "label": "Tout", "value": "all" },
    ]

    const [publish_status, setpublish_status] = useState("published");
    const [isLoading, setLoading] = useState();

    /**** 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();


        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, String(file_type)" + String(file_type));
            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:', result);
                setSend_img_article_Img_api("false");
                setSend_img_article_Img_message(result['message']);
                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 */


    function init_with_modele() {
        var init_text = '<div style="font-family: DM Sans;     font-style: normal;     font-weight: 600;     font-size: 24px;     line-height: 28px;     color: #16274F;     text-align: left;     margin-bottom: 10px;">    \
  1. Une solution complète et intégrée :</div> <div style="font-family: Inter;     font-style: normal;     font-weight: 400;     font-size: 20px;     line-height: 32px;     color: #4B5162;   \
  margin-bottom: 2rem;">      Mysy Training propose une plateforme tout-en-un qui simplifie la gestion de votre organisme de formation, depuis la    \
  planification des sessions jusqu\'à la facturation, en passant par le suivi des apprenants. <br />     Cette centralisation réduit les tâches administratives et optimise votre efficacité.<br />  \
  Mysy Training propose une plateforme tout-en-un qui simplifie la gestion de votre organisme de formation, depuis la      planification des sessions jusqu\'à la facturation, en passant par le suivi \
  des apprenants. Cette centralisation     réduit les tâches administratives et     optimise votre efficacité. </div>\
  <div style="font-family:DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;">\
  2. Conformité avec les réglementations :</div> <div style="font-family: Inter; font-style: normal; font-weight: 400; font-size: 20px; line-height: 32px; color: #4B5162; margin-bottom: 2rem;"> \
  La solution est conçue pour répondre aux exigences légales, comme Qualiopi ou les obligations de suivi des     financements CPF. Vous êtes ainsi assuré de     rester conforme aux normes en vigueur. </div>\
  <div style="font-family: DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;">    \
  3. Liste numérotée </div> <ol style="margin-bottom: 2rem;">     <li>        \
  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word; margin-bottom: 10px;">    \
  Renforcer la cr&eacute;dibilit&eacute; des &eacute;tablissements de formation. </div>     </li>     <li>        \
  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">      \
  Assurer une meilleure qualit&eacute; des prestations de formation. </div>     </li>     <li>       \
  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">       \
  Rendre les organismes &eacute;ligibles aux aides financi&egrave;res &nbsp; (par exemple, des OPCO ou             P&ocirc;le Emploi).</div>     </li> </ol> \
  <div style="font-family: DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;"> \
  4. Liste bullet point </div> <ul style="margin-bottom: 2rem;">     <li>         \
  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">        \
  MySy offre un module de gestion administrative permettant de centraliser tous les documents li&eacute;s aux             formations, y compris les conventions, convocations, programmes,\
  et certificats de satisfaction.</div>     </li>     <li>       \
  <div             style="width: 100%; color: #16274F; font-size: 18px; font-family: Inter; font-weight: 400; line-height: 24px; word-wrap: break-word;margin-bottom: 10px;">            \
  Gr&acirc;ce &agrave; des fonctionnalit&eacute;s telles que l\'import/export de donn&eacute;es en Excel et la             gestion automatis&eacute;e des documents,     \
  les organismes peuvent facilement fournir des preuves de conformit&eacute; lors de l\'audit Qualiopi.</div>     </li> </ul> \
  <div style="font-family: DM Sans; font-style: normal; font-weight: 600; font-size: 24px; line-height: 28px; color: #16274F; text-align: left; margin-bottom: 10px;">    \
  5. Une solution complète et intégrée (suite):</div> <div style="font-family: Inter; font-style: normal; font-weight: 400; font-size: 20px; line-height: 32px; color: #4B5162; margin-bottom: 2rem;">    \
  Mysy Training propose une plateforme tout-en-un qui simplifie la gestion de votre organisme de formation, depuis la      planification des sessions jusqu\'à la facturation, en passant par \
  le suivi des apprenants. <br />     Cette centralisation réduit les tâches administratives et optimise votre efficacité.<br /> </div>'

        setfield_texte_avis(init_text);
    }
    return (
        <div style={{ width: "100%", float: "left" }}>


            {/***   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', 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_dialog" style={{ "textAlign": 'left' }}>
                            Url souhaitée
                        </div>
                        <div className="div_row_dialog" >
                            <div className="div_row_dialog" style={{ "textAlign": 'left' }}>
                                <input
                                    type='text'
                                    name='name'
                                    value={article_avis_internal_url}
                                    onChange={(e) => {
                                        setarticle_avis_internal_url(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'
                                        disabled

                                        className='disabled_style_width_100_percent'

                                    ></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={{ with: '100%', float: 'left' }}>
                            <div style={{ "textAlign": 'left', with: '65%', float: 'left' }}>
                                <b> Texte Article </b>
                            </div>
                            <div style={{ "textAlign": 'right', with: '30%', paddingRight: '15px', cursor: 'pointer', float: 'right' }}
                                onClick={(event) => {

                                    if (field_texte_avis && String(field_texte_avis).length > 0) {
                                        if (window.confirm("Vos modifications seront perdues, Confirmer-vous la réinitialisation du text ?")) {
                                            init_with_modele();
                                        }
                                    } else {
                                        init_with_modele();
                                    }

                                }}>
                                Init <FcInternal style={{ fontSize: '14px' }} />
                            </div>
                        </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());

                                }}
                                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>}

                    </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" >Fermer</Button>
                        </div>
                        <div className="div_row_droite" style={{ "textAlign": 'center' }}>
                            <Button onClick={Add_Update_Article_Avis} className="bton_enreg_dialog">Envoyer&nbsp; <SendIcon /></Button>

                        </div>
                    </div>

                </DialogActions>


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


            <div className="recherchearticles_new_v2_style">
                <Helmet>
                    <meta name="title" content={"Le blog, liste des articles"} />
                    <meta name="description" content="Le blog, liste des articles. Éditeur Français de logiciels pour organisme de formation. Avec solutions de E-Learning, gestion administrative et gestion relation client nous accompagnons les organismes de formation à réaliser l’audit QUALIOPI en toute sérénité. Nous sommes les moins cher du marché. Nous vous accompagnons automatiser vos process : inscription, évaluation, émargement (qr-code), Check-list QUALIOPI, Personnalisation et édition documents, Gestion formateurs, Catalogue formations personnalisé. Nous sommes les moins cher du marché. Nous automatisons vos process : inscription, évaluation, émargement (qr-code),  QUALIOPI, Personnalisation des documents, Gestion formateurs, Catalogue personnalisé, bilan pédagogique et financier (PBF).  Nos options comme la signature électronique sont inclus dans le tarif de base." />
                    <meta name="robots" content="index,follow" />
                    <link rel="canonical" href={window.location.href} />


                </Helmet>

                <div className="div_mobile">

                    <div className="div_row block_entete" >
                        <div className="Background-header">

                            <div className="Title">

                                <div className="besoin_aide">
                                    Restez informé. Quelques articles pour vous.
                                    <div className="detail_text_aide">
                                        &nbsp;
                                    </div>
                                </div>

                                <div className="barre_recherche">
                                    <form onSubmit={handleSubmit(onSubmit)} className="div_005">
                                        <div class="form">

                                            <i class="fa fa-search"></i>

                                            <input
                                                type="text"
                                                class="form-control form-input"
                                                placeholder=" Texte (Titre, Description)"
                                                onChange={SearchTextHandle}
                                                id={"SearchText"}
                                                name={"SearchText"}
                                                style={{ "width": "80%", float: "left" }}
                                            />
                                            <nav style={{ "width": "15%", float: "left", paddingTop: "5px" }}>
                                                {SearchText.length > 2 && <span_clear> <BsFillXCircleFill onClick={clearsearchtext} /> </span_clear>} <span class="left-pan" >
                                                    &nbsp;<FaSearch onClick={get_all_articles_avis} /></span>
                                            </nav>


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

                            </div>


                        </div>

                    </div>
                    <div className="block_centrer">
                        {connected_user_article_avis_droit_modif === "1" && <div className="div_row">
                            <Button onClick={(e) => {
                                var al = moment((new Date()));
                                setarticle_avis_date_publication(moment(al).format('YYYY-MM-DD'));


                                clear_article_avis_fields();
                                setis_data_changed("");
                                setDialog_article_avis_open(true);

                            }}
                                className="bton_enreg_dialog"> Ajouter 1 article &nbsp;&nbsp;
                                <FcPlus style={{ fontSize: "20px" }} />
                            </Button>
                        </div>}

                        {connected_user_article_avis_droit_modif === "1" && New_Option_Filter && New_Option_Filter.length > 0 && <Autocomplete
                            disablePortal
                            name="filtre1"
                            id="filtre1"
                            className="disabled_style"
                            options={New_Option_Filter}
                            defaultValue={{ id: "published", label: "Publié", value: "published" }}
                            getOptionLabel={(option) => option.label}
                            onChange={(event, value) => {
                                if (value && value.value) {
                                    setpublish_status(value.value);

                                    if (value.value === "published") {
                                        get_all_published_articles_avis();
                                    } else if (value.value === "notpublished") {
                                        get_all_non_published_articles_avis();
                                    } else if (value.value === "all") {
                                        get_all_articles_avis();
                                    }
                                }

                            }}

                            renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                            />
                            }
                        />}

                        <div className="liste_articles">

                            {/*result && myApiResponse === "True" && <div className="okUpdateData">
      <Pagination
          className="pagination-bar"
          currentPage={currentPage2}
          totalCount={result.length}
          pageSize={PageSize}
          onPageChange={page => setCurrentPage2(page)}
      />


    </div>*/}

                            {String(publish_status) === "all" && get_all_articles_avis_result && get_all_articles_avis_result.length > 0 && currentTableData2 && get_all_articles_avis_result.map((formation) => (
                                <div className="block_article">
                                    <Articles article={JSON.parse(formation)} key={JSON.parse(formation).title_formation}
                                        connected_user_article_avis_droit_modif={connected_user_article_avis_droit_modif}
                                        get_all_articles_avis={get_all_articles_avis}

                                    />
                                </div>

                            ))}

                            {String(publish_status) === "published" && get_all_published_articles_avis_result && get_all_published_articles_avis_result.length > 0 && get_all_published_articles_avis_result.map((formation) => (
                                <div className="block_article">
                                    <Articles article={JSON.parse(formation)} key={JSON.parse(formation).title_formation}
                                        connected_user_article_avis_droit_modif={connected_user_article_avis_droit_modif}
                                        get_all_articles_avis={get_all_articles_avis}

                                    />
                                </div>

                            ))}

                            {String(publish_status) === "notpublished" && get_all_non_published_articles_avis_result && get_all_non_published_articles_avis_result.length > 0 && get_all_non_published_articles_avis_result.map((formation) => (
                                <div className="block_article">
                                    <Articles article={JSON.parse(formation)} key={JSON.parse(formation).title_formation}
                                        connected_user_article_avis_droit_modif={connected_user_article_avis_droit_modif}
                                        get_all_articles_avis={get_all_articles_avis}

                                    />
                                </div>

                            ))}


                            {/*result && <div>
      <Pagination
          className="pagination-bar"
          currentPage={currentPage2}
          totalCount={result.length}
          pageSize={PageSize}
          onPageChange={page => setCurrentPage2(page)}
      />

    </div>
    */}
                        </div>

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

export default RechercheArticles_new_v2;