import React, { useState, useEffect, useCallback, useRef } from "react";
import axios from "axios";
import { Helmet } from "react-helmet";
import { useParams } from 'react-router-dom'
import Header from "./Header";
import { useLocation } from "react-router-dom";
import fileDownload from 'js-file-download'
import { RichTextEditor } from '@mantine/rte';
import { Editor } from '@tinymce/tinymce-react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { getCookie, setCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";

import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
import format from 'date-fns/format'
import Link from '@mui/material/Link';
import parse from 'date-fns/parse'
import startOfWeek from 'date-fns/startOfWeek'
import getDay from 'date-fns/getDay'
import enUS from 'date-fns/locale/en-US'

import FullCalendar from "@fullcalendar/react";
import daygridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import { v4 as uuid } from "uuid";
import { isCompositeComponent } from "react-dom/test-utils";
import moment from "moment";
import allLocales from '@fullcalendar/core/locales-all'
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 Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import Module_Editique from "./Module_Editique";

import Module_Attestation_Formation from "./Module_Attestation_Formation";
import Module_Email_Management from "./Module_Email_Management";

import ReactPlayer from "react-player";
import ReactAudioPlayer from 'react-audio-player';
import AudioPlayer from 'react-audio-player';
import Paper from '@material-ui/core/Paper';

import { styled } from '@mui/material/styles';


import { DataGridPro } from '@mui/x-data-grid-pro';

import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';


import { makeStyles } from '@material-ui/core/styles';

import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
import { IconButton } from '@material-ui/core';

import ReactDOM from 'react-dom';
import Draggable from 'react-draggable';

import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
import { useDemoData } from '@mui/x-data-grid-generator';

import SignatureCanvas from 'react-signature-canvas';

import BuildIcon from '@mui/icons-material/Build';
import PersonIcon from '@mui/icons-material/Person';
import randomColor from "randomcolor";
import Box from '@mui/material/Box';
import {
    DataGrid, frFR, GridToolbar, GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton,
    GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext,
    gridFilteredSortedRowIdsSelector,
    gridVisibleColumnFieldsSelector,
} from '@mui/x-data-grid';

import { AudioRecorder, useAudioRecorder } from 'react-audio-voice-recorder';

//import ContextMenu from 'react-jsx-context-menu';
import { ContextMenu, ContextMenuTrigger } from "react-contextmenu";
import * as XLSX from 'xlsx';

//import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
import useSound from 'use-sound';

import Module_Alert_Confirmation from "./Module_Alert_Confirmation";

import 'moment/locale/fr';

import Timeline, {
    TimelineHeaders,
    SidebarHeader,
    DateHeader
} from 'react-calendar-timeline';



const useStyles = makeStyles((theme) => ({
    paper: {
        overflowY: 'unset',
    },
    customizedButton: {
        position: 'absolute',
        left: '95%',
        top: '-9%',
        backgroundColor: 'lightgray',
        color: 'gray',
    },
}));

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


const locales = {
    'en-US': enUS,
}

const localizer = dateFnsLocalizer({
    format,
    parse,
    startOfWeek,
    getDay,
    locales,
})


const TestUrl_New = (props) => {



    // DEBUT  EXPORT EXCEL DATAGRID 

    function CustomToolbar(props) {

        return (
            <GridToolbarContainer {...props}>

                <GridToolbarColumnsButton />
                <GridToolbarFilterButton />
                <GridToolbarDensitySelector
                    slotProps={{ tooltip: { title: 'Change density' } }}
                />
                <Box sx={{ flexGrow: 1 }} />
                <ExportButton data_colums={props.data_colums} />


            </GridToolbarContainer>
        );
    }


    const { data, loading } = useDemoData({
        dataSet: 'Commodity',
        rowLength: 4,
        maxColumns: 6,
    });

    function getExcelData(apiRef) {
        // Select rows and columns
        const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
        const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef);

        // Format the data. Here we only keep the value
        const data = filteredSortedRowIds.map((id) => {
            const row = {};
            visibleColumnsField.forEach((field) => {
                row[field] = apiRef.current.getCellParams(id, field).value;
            });
            return row;
        });

        return data;
    }


    function ExportButton(props) {
        return (
            <GridToolbarExportContainer {...props}>
                <ExportMenuItem data_colums={props.data_colums} />
            </GridToolbarExportContainer>
        );
    }

    function handleExport(apiRef, data_colums) {

        console.log(" coucouuu ### columnVisibilityModel = ", columnVisibilityModel);
        const data = getExcelData(apiRef);

        const local_config = {
            keys: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) {
                if (mydata.field)
                    return mydata.field;
                else
                    return "";
            }),


            columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) {
                if (mydata.headerName)
                    return mydata.headerName;
                else
                    return "";
            }),

            fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx',
            sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"),
        };

        const rows = data.map((row) => {
            const mRow = {};
            for (const key of local_config.keys) {
                mRow[key] = row[key];
            }
            return mRow;
        });

        const worksheet = XLSX.utils.json_to_sheet(rows);
        XLSX.utils.sheet_add_aoa(worksheet, [[...local_config.columnNames]], {
            origin: 'A1',
        });

        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, local_config.sheetName);
        XLSX.writeFile(workbook, local_config.fileName, { compression: true });
    }

    function ExportMenuItem(props) {
        const apiRef = useGridApiContext();
        const { hideMenu } = props;

        return (
            <MenuItem
                onClick={() => {
                    handleExport(apiRef, props.data_colums);
                    // Hide the export menu after the export
                    hideMenu?.();
                }}
            >
                Export Excel
            </MenuItem>
        );
    }

    // FIN EXPORT EXCEL DATAGRID 

    const { courseid, tabid } = useParams();
    const [message, setMessage] = useState(null);
    const editorRef_programme = useRef(null);
    const [editorRef_programme_limite, seteditorRef_programme] = useState(1000);
    const [field_programme, setfield_programme] = useState("");
    const [editor_tochange, seteditor_tochange] = useState("");


    const editorRef_description = useRef(null);
    const [editorRef_description_limite, seteditorRef_description_limite] = useState(5000);
    const [field_description, setfield_description] = useState("");

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

    function DataUpdated() {

    }

    function add_text() {
        console.log(" Ajouter un texte ");
        editorRef_programme.current.insertContent("<i> OKKK </i> ");
    }

    function add_nom() {
        editorRef_programme.current.insertContent(" <i>{{nom}}</i> ");
    }

    function add_prenom() {
        editorRef_programme.current.insertContent(" <i>{{prenom}}</i> ");
    }

    function add_document() {
        var programme = editorRef_programme.current.getContent();
        console.log(" doc text = ", programme);
    }

    function delete_document() {

    }

    function add_selected_fields() {

        if (!p_collection || !p_champ_table) {
            alert(" Champ invalide ");
            return;
        }
        var local_field = "{{" + String(p_collection) + "." + String(p_champ_table) + "}}";
        editorRef_programme.current.insertContent(" <b><i>" + String(local_field) + "</i></b> ");
    }



    const [p_filtre1, setp_filtre1] = useState();
    const [p_filtre1_value, setp_filtre1_value] = useState();

    const [p_champ_table, setp_champ_table] = useState();
    const [p_collection, setp_collection] = useState();


    const [p_champ_table_bis, setp_champ_table_bis] = useState();

    const [Get_Personnalisable_Collection_and_Fields_api, setGet_Personnalisable_Collection_and_Fields_api] = useState();
    const [Get_Personnalisable_Collection_and_Fields_message, setGet_Personnalisable_Collection_and_Fields_message] = useState();
    const [Get_Personnalisable_Collection_and_Fields_result, setGet_Personnalisable_Collection_and_Fields_result] = useState();
    function Get_Personnalisable_Collection_and_Fields() {

        var form = new FormData();


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


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



        axios.post(myurl, form).then(res => {

            if (String(res.data.status) === String("true")) {
                //console.log(" In Get_Personnalisable_Collection_and_Fields  res.data.status = " + res.data.status);
                //console.log(" In Get_Personnalisable_Collection_and_Fields  res.data.message r_class = " + res.data.message);

                setGet_Personnalisable_Collection_and_Fields_api("true");
                setGet_Personnalisable_Collection_and_Fields_result(res.data.message);

            }
            else {
                setGet_Personnalisable_Collection_and_Fields_api("false");
                setGet_Personnalisable_Collection_and_Fields_message(res.data.message);
                alert(res.data.message)
            }

        }).catch((error) => {
            console.warn('Not good man :( Get_Personnalisable_Collection_and_Fields = ', error);
            setGet_Personnalisable_Collection_and_Fields_api("false");
            alert(" Impossible de recuperer la liste des collection et champs personnalisables");
            //setmyApimyApiMessage("")
        })
    }

    const [Get_Personnalisable_Collections_api, setGet_Personnalisable_Collections_api] = useState();
    const [Get_Personnalisable_Collections_message, setGet_Personnalisable_Collections_message] = useState();
    const [Get_Personnalisable_Collections_result, setGet_Personnalisable_Collections_result] = useState();
    function Get_Personnalisable_Collections() {

        var form = new FormData();
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);

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

        axios.post(myurl, form).then(res => {

            if (String(res.data.status) === String("true")) {
                //console.log(" In Get_Personnalisable_Collections  res.data.status = " + res.data.status);
                //console.log(" In Get_Personnalisable_Collections  res.data.message r_class = " + res.data.message);

                setGet_Personnalisable_Collections_api("true");
                setGet_Personnalisable_Collections_result(res.data.message);

            }
            else {
                setGet_Personnalisable_Collections_api("false");
                setGet_Personnalisable_Collections_message(res.data.message);
                alert(res.data.message)
            }

        }).catch((error) => {
            console.warn('Not good man :( Get_Personnalisable_Collections = ', error);
            setGet_Personnalisable_Collections_api("false");
            alert(" Impossible de recuperer la liste des collection et champs personnalisables");
            //setmyApimyApiMessage("")
        })
    }

    const [mysy_events, setmysy_events] = useState();

    const [Get_List_Agenda_Events_api, setGet_List_Agenda_Events_api] = useState();
    const [Get_List_Agenda_Events_message, setGet_List_Agenda_Events_message] = useState();
    const [Get_List_Agenda_Events_result, setGet_List_Agenda_Events_result] = useState();
    function Get_List_Agenda_Events(event) {

        var form = new FormData();
        const stored_cookie = getCookie('tokenmysypart');

        form.append("token", stored_cookie);


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

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

            if (String(res.data.status) === String("true")) {
                setGet_List_Agenda_Events_api("true");
                setGet_List_Agenda_Events_result(res.data.message);

                var tab_event = []
                var filtre2 = res.data.message.map(obj => {


                    var local_val = {
                        'title': String(JSON.parse(obj).event_title),
                        'start': String(JSON.parse(obj).event_start),
                        'end': String(JSON.parse(obj).event_end),
                        'id': String(JSON.parse(obj)._id),
                    }

                    tab_event.push(local_val);



                });
                console.log(" #### tab_event =", tab_event);
                setmysy_events(tab_event);


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

        }).catch((error) => {
            console.warn('Not good man :( Get_List_Agenda_Events = ', error);
            setGet_List_Agenda_Events_api("false");
            //setmyApimyApiMessage("")
        })
    }

    const [tab_label, settab_label] = useState([]);

    function Get_Local_Label() {
        var new_data2 = [];
        var node1 = {
            "_id": "@text1",
            "label": "text1_label",
        };


        var node2 = {
            "_id": "@text2",
            "label": "text2_label",
        };

        new_data2.push(node1);
        new_data2.push(node2);

        settab_label(new_data2);

    }

    useEffect(() => {
        Get_Local_Label();
        Get_List_Agenda_Events();
        Get_Personnalisable_Collections();
        Get_Personnalisable_Collection_and_Fields();
        Get_Partner_Object_Specific_Fields("ressource_humaine");


    }, [])


    const [p_document_name, setp_document_name] = useState();
    const [p_document_type, setp_document_type] = useState();
    const [p_document_ref_interne, setp_document_ref_interne] = useState();
    const [p_document_sujet, setp_document_sujet] = useState();
    const [p_document_nom, setp_document_nom] = useState();

    const [Add_one_Partner_Document_api, setAdd_one_Partner_Document_api] = useState();
    const [Add_one_Partner_Document_message, setAdd_one_Partner_Document_message] = useState();
    const [Add_one_Partner_Document_result, setAdd_one_Partner_Document_result] = useState();
    function Add_one_Partner_Document() {
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");


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

        if (p_document_ref_interne)
            form.append("ref_interne", p_document_ref_interne);
        else {
            alert(" Vous devez definir une reference interne");
            return;
        }


        if (p_document_type)
            form.append("type_doc", p_document_type);
        else {
            alert(" Vous devez definir un type de document");
            return;
        }


        if (p_document_sujet)
            form.append("sujet", p_document_sujet);
        else {
            alert(" Vous devez definir un sujet");
            return;
        }



        if (editorRef_programme) {
            var programme = editorRef_programme.current.getContent();
            form.append("contenu_doc", programme);
        }
        else {
            form.append("contenu_doc", "");
        }

        console.log(" Add_one_Partner_Document affectation form == ", form);


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

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

            if (String(res.data.status) === String("true")) {
                setAdd_one_Partner_Document_api("true");
                setAdd_one_Partner_Document_result(res.data.message);

                alert(res.data.message);

            }
            else {
                setAdd_one_Partner_Document_api("false");
                setAdd_one_Partner_Document_message(res.data.message);
                alert(res.data.message);
            }

        }).catch((error) => {

            console.log('UpdateStagiaireData : Not good man :( Add_one_Partner_Document = ' + error);
            setAdd_one_Partner_Document_api("false");
            alert(" Impossible d'ajouter le document");

        })
    }

    const myEventsList = []
    const [events, setEvents] = useState([]);
    const handleSelect = (info) => {

        const { start, end } = info;
        const eventNamePrompt = prompt("Enter, Nom evenment");
        if (eventNamePrompt) {

            setEvents([
                ...events,
                {
                    start,
                    end,
                    title: eventNamePrompt,
                    id: uuid(),
                },
            ]);
        }
    };

    const EventItem = ({ info }) => {
        const { event } = info;
        return (
            <div>
                <p>ch - {event.title}</p>
            </div>
        );
    };


    // Gestion champs specifiques 

    /*
    *** ALGORITHME
    1 - Récuperer la liste des champs specifiques de la collection concernée - Array : list_nom_champs_spec
    2 - Récupérer les caracteristiques de champs champs spécifique : "id, nom, label, type valeur, etc"
       - avec un champ 'value' à vide. Mettre dans le tableau JSON, 'spec_champs_valeur'
    
    3 - Créer une nouvelle table qui permettra de gerer les hook : const [rows_champs_specifics, setrows_champs_specifics] = useState([]);
    4 - Afficher en html les elements 'rows_champs_specifics'
    5 - Gerer la modification avec la fonction 'change_champs_spec_handle'
    6 - On recuperer les valeur lors du click d'enregistrement.
    
    */


    const list_nom_champs_spec = []
    const [spec_champs_valeur, setspec_champs_valeur] = useState([]);

    //const spec_champs_valeur = ""

    const [Get_Partner_Object_Specific_Fields_api, setGet_Partner_Object_Specific_Fields_api] = useState();
    const [Get_Partner_Object_Specific_Fields_message, setGet_Partner_Object_Specific_Fields_message] = useState();
    const [Get_Partner_Object_Specific_Fields_result, setGet_Partner_Object_Specific_Fields_result] = useState();
    function Get_Partner_Object_Specific_Fields(local_collection_obj_metier) {

        var form = new FormData();
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("object_name", local_collection_obj_metier);

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

        axios.post(myurl, form).then(res => {

            if (String(res.data.status) === String("true")) {
                //console.log(" In Get_Partner_Object_Specific_Fields  res.data.status = " + res.data.status);
                //console.log(" In Get_Partner_Object_Specific_Fields  res.data.message r_class = " + res.data.message);

                setGet_Partner_Object_Specific_Fields_api("true");
                setGet_Partner_Object_Specific_Fields_result(res.data.message);


                setrows_champs_specifics(res.data.message);


            }
            else {
                setGet_Partner_Object_Specific_Fields_api("false");
                setGet_Partner_Object_Specific_Fields_message(res.data.message);
                alert(res.data.message)
            }

        }).catch((error) => {
            console.warn('Not good man :( Get_Partner_Object_Specific_Fields = ', error);
            setGet_Partner_Object_Specific_Fields_api("false");
            alert(" Impossible de recuperer la liste des collection et champs personnalisables");
            //setmyApimyApiMessage("")
        })
    }



    const [rows_champs_specifics, setrows_champs_specifics] = useState([]);
    const [display_champs_specifics, setdisplay_champs_specifics] = useState("0");

    function afficher_champs_spec() {

        setdisplay_champs_specifics("1");
        //setrows_champs_specifics(spec_champs_valeur);

    }

    function findIndexByProperty(data, key, value) {
        for (var i = 0; i < data.length; i++) {
            if (data[i][key] == value) {
                return i;
            }
        }
        return -1;
    }


    function findValueByProperty(data, key, value) {
        for (var i = 0; i < data.length; i++) {
            if (data[i][key] == value) {

                var tmp_val = JSON.parse(data[i]);

                return tmp_val.field_value

            }
        }
        return "";
    }


    const spec_field_updated_values = []

    function change_champs_spec_handle() {

        for (let i = 0; i < rows_champs_specifics.length; i++) {

            var field_name = JSON.parse(rows_champs_specifics[i]).field_name;
            var field_type = JSON.parse(rows_champs_specifics[i]).field_type;
            var field_label = JSON.parse(rows_champs_specifics[i]).field_label;
            var is_mandatory = JSON.parse(rows_champs_specifics[i]).is_mandatory;


            if (document.getElementsByName(String(field_name))[0]) {

                var field_value = document.getElementsByName(String(field_name))[0].value;
                var new_val = { 'field_name': field_name, 'field_value': field_value, 'field_type': field_type, 'field_label': field_label, 'is_mandatory': is_mandatory }
                var johnIndex = findIndexByProperty(spec_field_updated_values, 'field_name', field_name);
                if (johnIndex > -1) {
                    spec_field_updated_values[johnIndex] = new_val;

                } else {
                    spec_field_updated_values.push(new_val);
                }
            }

        }

        //setrows_champs_specifics(spec_champs_valeur);

        //console.log(" OUTT spec_field_updated_values = ", spec_field_updated_values);
    }
    // -- end champs specifiques 

    const renderEventContent = (eventInfo) => {
        console.log(eventInfo);
        return (
            <>
                <b>{eventInfo.timeText}</b><br />
                <i>{eventInfo.event.title}</i>
            </>
        )
    };

    const handleEventClick = (arg) => {
        alert(arg.event.title)
        alert(arg.event.start)
        setdialogMessage(" coucou cherif");
        setOpen(true);
    }

    const [open, setOpen] = React.useState(false);

    const [dialogMessage, setdialogMessage] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

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

    const handleClose_buton = () => {
        setOpen(false);
    };

    const [contextMenu, setContextMenu] = React.useState(null);
    const handleContextMenu = (event) => {
        event.preventDefault();
        setContextMenu(
            contextMenu === null
                ? {
                    mouseX: event.clientX + 2,
                    mouseY: event.clientY - 6,
                }
                : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
                // Other native context menus might behave different.
                // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
                null,
        );
    };

    const handleClose22 = () => {
        alert(" 22");
        setContextMenu(null);
    };

    const handleClose23 = () => {
        alert(" 23");
        setContextMenu(null);
    };
    const handleClose24 = () => {
        alert(" 24");
        setContextMenu(null);
    };
    const handleClose25 = () => {
        setContextMenu(null);
    };

    const signatureCanvasRef = useRef(null);

    // API method examples
    const checkIfEmpty = () => {
        const isEmpty = signatureCanvasRef.current.isEmpty();
        console.log('Is signature pad empty?', isEmpty);
        if (signatureCanvasRef) {
            console.log(signatureCanvasRef);
            setpad_signature_img(signatureCanvasRef.current.toDataURL())

        }
    };

    const clearCanvas = () => {
        signatureCanvasRef.current.clear();
    };

    const [pad_signature_img, setpad_signature_img] = React.useState("");


    const [Dialog_1_message, setDialog_1_message] = React.useState(false);
    const [Dialog_1_open, setDialog_1_open] = React.useState(false);
    function Dialog_1_handle_change_participant_session(message) {
        setDialog_1_message(message);
        setDialog_1_open(true);
    }

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


    const classes = useStyles();
    const [open1, setOpen1] = React.useState(false);

    const handleClickOpen1 = () => {
        setOpen1(true);
    };

    const handleClose1 = () => {
        setOpen1(false);
    };

    function handleClick(e, data) {
        console.log(" CKILLLLL e.target.attributes.valuess.value = ", e.target.attributes.valuess.value);
        console.log(" CKILLLLL e.target.attributes.data = ", e.target.attributes.data);
    }



    function CustomToolbar_ok() {
        return (
            <GridToolbarContainer>
                <GridToolbarColumnsButton />
                <GridToolbarFilterButton />
                <GridToolbarDensitySelector
                    slotProps={{ tooltip: { title: 'Change density' } }}
                />
                <Box sx={{ flexGrow: 1 }} />
                <GridToolbarExport
                    slotProps={{
                        tooltip: { title: 'Export data' },
                        button: { variant: 'outlined' },
                    }}

                    csvOptions={{
                        fileName: 'Export',
                        delimiter: ';',
                        utf8WithBom: true,
                    }}

                    printOptions={{ disableToolbarButton: true }}

                />
            </GridToolbarContainer>
        );
    }




    function display_data() {
        console.log(" Data = ", data);
    }
    const [columnVisibilityModel, setColumnVisibilityModel] = React.useState({
    });

    const [visibleColumns, setVisibleColumns] = React.useState();


    /*const {
        transcript,
        listening,
        resetTranscript,
        browserSupportsSpeechRecognition
    } = useSpeechRecognition();

    if (!browserSupportsSpeechRecognition) {
        return <span>Browser doesn't support speech recognition.</span>;
    }*/

    const recorderControls = useAudioRecorder(
        {
            noiseSuppression: true,
            echoCancellation: true,
        },
        (err) => console.table(err) // onNotAllowedOrFound
    );


    const addAudioElement = (blob) => {
        const url = URL.createObjectURL(blob);


        const audio = document.createElement('audio');

        audio.src = url;
        audio.controls = true;

        document.body.appendChild(audio);

        setblob_recorded_file(audio.attributes.src.nodeValue);

        console.log(" ### Envoie du fichier audio au server ");
        send_audio_file_to_server_blob(audio.attributes.src.nodeValue);

    };


    const [collection_instruction_id, setcollection_instruction_id] = React.useState("");

    async function send_audio_file_to_server_blob(file_audio) {

        const audioBlob = await fetch(file_audio).then((r) => r.blob());
        const audiofile = new File([audioBlob], "audiofile.mp3", {
            type: "audio/mp3",
        });

        setLoading(true);
        var formData = new FormData();
        formData.append("file", audiofile);
        const stored_cookie = getCookie('tokenmysypart');
        formData.append("token", stored_cookie);

        var api_url = process.env.REACT_APP_API_URL + "myclass/api/mysy_openai_get_voice_file/";
        /*
        Verifier si on a une instruction en cours. si c'est le cas on fait appeler une api differente

        */
        if (collection_instruction_id && String(collection_instruction_id).length > 5) {
            console.log(" #### une instruction est en cours : _id = ", collection_instruction_id);
            api_url = process.env.REACT_APP_API_URL + "myclass/api/mysy_openai_confirme_voice_instruction_api/";
            formData.append("instruction_id", collection_instruction_id);
            const stored_cookie = getCookie('tokenmysypart');
            formData.append("token", stored_cookie);

            // On efface l'_id de l'instruction en cours
            setcollection_instruction_id("");

        }

        fetch(
            api_url,
            {
                method: 'POST',
                body: formData,
            }
        ).then((response) => response.json())
            .then((result) => {
                setLoading(false);
                console.log('send_audio_file_to_server_blob status == :', result['status']);
                console.log('send_audio_file_to_server_blob message == :', result['message']);
                console.log('send_audio_file_to_server_blob collection_instruction_id == :', result['collection_instruction_id']);
                console.log('send_audio_file_to_server_blob result == :', result);
                if (result['repeat_instruction']) {
                    console.log('repeat_instruction repeat_instruction repeat_instruction == zz', result['repeat_instruction']);
                }
                //setisimgSelected(false);


                if (String(result['status']) === "true") {
                    //alert(" L'instruction a été correctement transferée au serveur");
                    if (JSON.parse(result['message']).document_mp3) {
                        var document_mp3 = "data:audio/mp3;base64," + JSON.parse(result['message']).document_mp3;
                        let local_audio_file = new Audio(document_mp3);
                        local_audio_file.play();
                    }
                    if (result['repeat_instruction'] && result['repeat_instruction'] === "1" && result['collection_instruction_id']) {
                        setcollection_instruction_id(result['collection_instruction_id']);
                    }
                    else if (result['repeat_instruction'] && result['repeat_instruction'] !== "1") {
                        setcollection_instruction_id("");
                    }

                    else if (result['collection_instruction_id']) {
                        setcollection_instruction_id(result['collection_instruction_id']);
                    } else {
                        setcollection_instruction_id("");
                    }

                } else {

                    alert(" ERRR : L'instruction N'a PAS été correctement transferée au serveur");
                }

            })
            .catch((error) => {
                setLoading(false);
                console.error('Error - send_audi_blob:', error);
                // setisimgSelected(true);
            });
    };


    function Get_and_launch_audio_file() {

        var url = process.env.REACT_APP_API_URL + "myclass/api/mysy_openai_get_voice_file/";

        axios.post(url).then(res => {

            if (String(res.data.status) === "true") {
                if (JSON.parse(res.data.message).document_mp3) {
                    var document_mp3 = "data:audio/mp3;base64," + JSON.parse(res.data.message).document_mp3;
                    let local_audio_file = new Audio(document_mp3);
                    local_audio_file.play();

                }

            } else {
                // lire un message d'erreur
                console.log(" returrrr FALSE");
            }

        }).catch((error) => {

            console.warn('Get_and_launch_audio_file ee: Not good man :(  = ', error);

        })

    }

    let audio = new Audio("/audio2.mp3");
    const lecture_fichier_local = () => {
        audio.play()
    }



    const [blob_recorded_file, setblob_recorded_file] = React.useState("");
    const [playbackRate, setPlaybackRate] = React.useState(0.75);

    const [play] = useSound('audio.mp3',
        { playbackRate });


    const handleClick_play = async () => {

        // var path = "blob:http://localhost:3009/5b14dae1-d402-47cd-b71b-fa3938563265";
        //  var path = "audio.mp3";
        let path = require("./audio.mp3").default;
        const audio = new Audio(path);
        const audioPromise = audio.play();
        if (audioPromise !== undefined) {
            audioPromise
                .then(() => {
                    // autoplay started
                    console.log("works");
                })
                .catch((err) => {
                    // catch dom exception
                    console.info(err);
                });
        }
    };


    const [isLoading, setLoading] = useState();

    const columns = [
        { field: 'jobTitle', headerName: 'Job Title', width: 200 },
        {
            field: 'recruitmentDate',
            headerName: 'Recruitment Date',
            type: 'date',
            width: 150,
        },
    ];

    const columns_no_group = [
        { field: 'hierarchy', headerName: 'hierarchy Tes', width: 200 },
        { field: 'jobTitle', headerName: 'Job Title', width: 200 },
        {
            field: 'recruitmentDate', headerName: 'Recruitment Date', type: 'date', width: 150,
        },
    ];

    const rows = [
        {
            hierarchy: ['Sarah'],
            jobTitle: 'Head of Human Resources',
            recruitmentDate: new Date(2020, 8, 12),
            id: 0,
        },
        {
            hierarchy: ['Thomas'],
            jobTitle: 'Head of Sales',
            recruitmentDate: new Date(2017, 3, 4),
            id: 1,
        },
        {
            hierarchy: ['Thomas', 'Robert'],
            jobTitle: 'Sales Person',
            recruitmentDate: new Date(2020, 11, 20),
            id: 2,
        },
        {
            hierarchy: ['Thomas', ''],
            jobTitle: 'Sales Person',
            recruitmentDate: new Date(2020, 10, 14),
            id: 3,
        },
        {
            hierarchy: ['Thomas', 'Nancy'],
            jobTitle: 'Sales Person',
            recruitmentDate: new Date(2017, 10, 29),
            id: 4,
        },
        {
            hierarchy: ['Thomas', 'Daniel'],
            jobTitle: 'Sales Person',
            recruitmentDate: new Date(2020, 7, 21),
            id: 5,
        },
        {
            hierarchy: ['Thomas', 'Christopher'],
            jobTitle: 'Sales Person',
            recruitmentDate: new Date(2020, 7, 20),
            id: 6,
        },
        {
            hierarchy: ['Thomas', 'Donald'],
            jobTitle: 'Sales Person',
            recruitmentDate: new Date(2019, 6, 28),
            id: 7,
        },
        {
            hierarchy: ['Mary'],
            jobTitle: 'Head of Engineering',
            recruitmentDate: new Date(2016, 3, 14),
            id: 8,
        },
        {
            hierarchy: ['Mary', 'Jennifer'],
            jobTitle: 'Tech lead front',
            recruitmentDate: new Date(2016, 5, 17),
            id: 9,
        },
        {
            hierarchy: ['Mary', 'Jennifer', 'Anna'],
            jobTitle: 'Front-end developer',
            recruitmentDate: new Date(2019, 11, 7),
            id: 10,
        },
        {
            hierarchy: ['Mary', 'Michael'],
            jobTitle: 'Tech lead devops',
            recruitmentDate: new Date(2021, 7, 1),
            id: 11,
        },
        {
            hierarchy: ['Mary', 'Linda'],
            jobTitle: 'Tech lead back',
            recruitmentDate: new Date(2017, 0, 12),
            id: 12,
        },
        {
            hierarchy: ['Mary', 'Linda', 'Elizabeth'],
            jobTitle: 'Back-end developer',
            recruitmentDate: new Date(2019, 2, 22),
            id: 13,
        },
        {
            hierarchy: ['Mary', 'Linda', 'William'],
            jobTitle: 'Back-end developer',
            recruitmentDate: new Date(2018, 4, 19),
            id: 14,
        },
    ];


    const getTreeDataPath = (param) => param.hierarchy;

    const HeaderWithIconRoot = styled('div')(({ theme }) => ({
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
        '& span': {
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            marginRight: theme.spacing(0.5),
        },
    }));


    const [data_row_grouped_by, setdata_row_grouped_by] = useState("");

    function datagrid_grouped_by_domain() {
        setdata_row_grouped_by("domaine");
        getTreeDataPath(rows)
    }

    const [display_alert_mysy, setdisplay_alert_mysy] = useState("1");

    const groups = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }]

    const items = [
        {
            id: 1,
            group: 1,
            title: 'item 1',
            start_time: moment(),
            end_time: moment().add(1, 'hour')
        },
        {
            id: 2,
            group: 2,
            title: 'item 2',
            start_time: moment().add(-0.5, 'hour'),
            end_time: moment().add(0.5, 'hour')
        },
        {
            id: 3,
            group: 1,
            title: 'item 3',
            start_time: moment().add(2, 'hour'),
            end_time: moment().add(3, 'hour')
        }
    ]

    const groups22 = [
        { id: "676afefbbe666367d11e53cc", title: 'IFOD_22_Sess_AOUT_DEV_2412' },
        { id: "6707909797308f17f8a74e5a", title: 'tetet' },
        { id: "66e561baf6d6f0c1ee9620d3", title: 'sess_test' },
        { id: "66cdeb5d7e8061b7b6f9b068", title: 'IFOD_44_Sess_RESA_DEV' },
        { id: "66cdeb5d7e8061b7b6f9b066", title: 'IFOD_44_Sess_JUIN_DEV' },

    ]

    const items22 = [
        {
            "_id": "676afefbbe666367d11e53cc",
            "group": "676afefbbe666367d11e53cc",
            "id": "0",
            "label": "IFOD_22_Sess_AOUT_DEV_2412",
            "code_session": "IFOD_22_Sess_AOUT_DEV_2412",
            "titre": "Session Juinje",
            "date_debut": "12/01/2025",
            "date_fin": "17/01/2025",
            "session_etape": "Planification",
            "is_session_alert": "0",
            "invoiced_statut": "0",
            "session_alert_message": "OK",
            "title": "IFOD_22_Sess_AOUT_DEV_2412",
            "start_time": moment().add(-2, 'day'),
            "end_time": moment().add(1, 'day'),
            "canMove": false,
            itemProps: {
                style: {
                    color: "black",
                    background: randomColor({ luminosity: "light", seed: "IFOD_22_Sess_AOUT_DEV_2412" })
                },
                onDoubleClick: () => { console.log('You clicked double 0111!') }
            }
        },
        {
            "_id": "6707909797308f17f8a74e5a",
            "group": "6707909797308f17f8a74e5a",
            "id": "1",
            "label": "tetet",
            "code_session": "tetet",
            "titre": "ezrezdddd",
            "date_debut": "13/10/2024",
            "date_fin": "15/10/2024",
            "session_etape": "Projet",
            "is_session_alert": "0",
            "invoiced_statut": "0",
            "session_alert_message": "OK",
            "title": "tetet",
            "start_time": moment().add(2, 'day'),
            "end_time": moment().add(3, 'day'),
            "canMove": false,
            itemProps: {
                style: {
                    color: "black",
                    background: randomColor({ luminosity: "light", seed: "tetet" })
                },
                onDoubleClick: () => { console.log('You clicked double 0 2222!') }
            }
        },
        {
            "_id": "66e561baf6d6f0c1ee9620d3",
            "group": "66e561baf6d6f0c1ee9620d3",
            "id": "2",
            "label": "sess_test",
            "code_session": "sess_test",
            "titre": "Session Juin",
            "date_debut": "22/09/2024",
            "date_fin": "26/09/2024",
            "session_etape": "Planifiée",
            "is_session_alert": "0",
            "invoiced_statut": "0",
            "session_alert_message": "OK",
            "title": "sess_test",
            "start_time": moment().add(5, 'day'),
            "end_time": moment().add(10, 'day'),
            "canMove": false,
            itemProps: {
                style: {
                    color: "black",
                    background: randomColor({ luminosity: "light", seed: "sess_test" })
                }
            }
        },
        {
            "_id": "66cdeb5d7e8061b7b6f9b068",
            "group": "66cdeb5d7e8061b7b6f9b068",
            "id": "3",
            "label": "IFOD_44_Sess_RESA_DEV",
            "code_session": "IFOD_44_Sess_RESA_DEV",
            "titre": "Session Reservation",
            "date_debut": "24/06/2024",
            "date_fin": "27/06/2024",
            "session_etape": "2",
            "is_session_alert": "0",
            "invoiced_statut": "0",
            "session_alert_message": "OK",
            "title": "IFOD_44_Sess_RESA_DEV",
            "start_time": moment("18/01/2025", "DD/MM/YYYY"),
            "end_time": moment("22/01/2025", "DD/MM/YYYY").add(1, 'days'),
            "canMove": false,
            itemProps: {
                style: {
                    color: "black",
                    background: randomColor({ luminosity: "light", seed: "IFOD_44_Sess_RESA_DEV" })
                }
            }
        },
        {
            "_id": "66cdeb5d7e8061b7b6f9b066",
            "group": "66cdeb5d7e8061b7b6f9b066",
            "id": "4",
            "label": "IFOD_44_Sess_JUIN_DEV",
            "code_session": "IFOD_44_Sess_JUIN_DEV",
            "titre": "Session Juin",
            "date_debut": "22/01/2025",
            "date_fin": "26/01/2025",
            "session_etape": "2",
            "is_session_alert": "1",
            "invoiced_statut": "0",
            "session_alert_message": "<br/> CONVENTION_STAGIAIRE_ENTREPRISE Non Commencé<br/> CONVOCATION_STAGIAIRE Non Commencé<br/> QUESTION_POSITIONNEMENT Non Commencé"
        },

    ]

    console.log(" ### items22 == ", items22);

    const defaultTimeStart = moment().startOf("day").add(-3, "day").toDate();
    const defaultTimeEnd = moment().startOf("day").add(10, "day").toDate();

    const func_handleItemMove = (itemId, dragTime, newGroupOrder) => {

        console.log(" ## dans fonction func_handleItemMove");
        console.log(" ## itemId = ", itemId);
        console.log(" ## dragTime = ", dragTime);
        console.log(" ## newGroupOrder = ", newGroupOrder);

        const local_group = groups22[newGroupOrder];
        console.log(" ## local_group = ", local_group);

        var local_item = items22.filter((data) => data._id === String((local_group.id)));

        console.log(" ## local_item = ", local_item);

        var new_date = new Date(dragTime);
        console.log(" ### PREVIOUS DATA")
        console.log(" ## OLD_date start = ", local_item[0].start_time);
        console.log(" ## OLD_date END = ", local_item[0].end_time);



        console.log(" ## new_date start = ", new_date);



        var tmpe = dragTime + (local_item[0].end_time - local_item[0].start_time);



        var new_end_date_v2 = new Date(dragTime + (local_item[0].end_time - local_item[0].start_time));
        console.log(" ## new_END_date= ", new_end_date_v2);

        /*
                const diffTime = Math.abs(local_item[0].end_time - local_item[0].start_time);
        
                const diffminute = Math.abs(local_item[0].end_time - local_item[0].start_time) / 60000;
        
                const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
                console.log(diffTime + " milliseconds");
                console.log(diffminute + " minute");
                console.log(diffDays + " days");
        
                var newDateObj = moment(new_date).add(diffminute, 'm').toDate();
        
                console.log(newDateObj + " newDateObj");
                */

    };

    const func_handleItemResize = (itemId, time, edge) => {

        console.log(" ## dans fonction func_handleItemResize");
        console.log(" ## itemId = ", itemId);
        console.log(" ## time = ", time);
        console.log(" ## edge = ", edge);

    };

    const func_handleItemDrag = (eventType, itemId, time, edge, newGroupOrder) => {

        console.log(" ## dans fonction func_handleItemDrag");
        console.log(" ## eventType = ", eventType);
        console.log(" ## itemId = ", itemId);
        console.log(" ## time = ", time);
        console.log(" ## edge = ", edge);
        console.log(" ## newGroupOrder = ", newGroupOrder);

    };

    const func_handleItemClick = (itemId, _, time) => {
        console.log("Clicked: " + itemId, moment(time).format());
    };

    const func_handleItemDoubleClick = (itemId, _, time) => {
        console.log("Double Click: " + itemId, moment(time).format());
    };


    return (
        <div className="testurl_new">

            {isLoading && <div className="loader-container">
                <div className="mysy_spinner">  <img src={img_loading_spin} />  </div>
            </div>}


            <Helmet>
                <title>testurl_new</title>
                <meta name="description" content="{this.metaDetails.description}" />
                <meta name="keywords" content="{this.metaDetails.keywords}" />

            </Helmet>

            <Header />

            <Dialog
                open={open}
                onClose={handleClose}>
                <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily:'DM Sans'}} id="draggable-dialog-title"> Subscribe</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        {dialogMessage}
                    </DialogContentText>
                    <TextField
                        autoFocus
                        margin="dense"
                        id="name"
                        label="Email Address"
                        type="email"
                        fullWidth
                        variant="standard"
                    />
                </DialogContent>

                <DialogActions>
                    <Button onClick={handleClose_buton}>Cancel</Button>
                    <Button onClick={handleClose_buton}>Subscribe</Button>
                </DialogActions>
            </Dialog>


            { /********* Dialog email */}
            <Dialog
                onClose={() => null}

                //onClose={Dialog_1_handleClose}
                className="module_email_management"
                PaperProps={{
                    sx: {
                        width: "100%",
                        maxWidth: "920px!important",
                    },
                    className: classes.paper, // Apply the paper style
                    style: {
                        overflowY: 'unset',
                        position: 'absolute',
                        top: '5rem'
                    },
                }}
                open={Dialog_1_open}
                hideBackdrop={true}
                disableScrollLock
            >


                <DialogContent >
                    <DialogContentText>
                        {Dialog_1_message}
                    </DialogContentText>


                    <Module_Email_Management father_close_function={Dialog_1_handleClose} email_destinataire={"mysy1000formation+02@gmail.com,mysytraining+apprenant3@gmail.com"}
                        related_collection={"inscription"} />

                </DialogContent>



                <DialogActions>
                    <IconButton
                        autoFocus
                        onClick={Dialog_1_handleClose}
                        color="primary"
                        className={classes.customizedButton}
                    >
                        <CancelPresentationIcon />
                    </IconButton>

                </DialogActions>

            </Dialog>
            { /********* Fin Dialog email */}

            <div className="div_mobile">


                <h3 style={{  fontFamily:'DM Sans' }}> Page de test * testurl_new </h3>
                parametres courseid = {courseid}, tabid = {tabid}
                <br />
                Affichage Timeline <br />
                <div>
                    Rendered by react!
                    <Timeline
                        groups={groups22}
                        items={items22}
                        defaultTimeStart={defaultTimeStart}
                        defaultTimeEnd={defaultTimeEnd}
                        fullUpdate
                        itemTouchSendsClick={false}
                        stackItems
                        itemHeightRatio={0.75}
                        canMove={true}
                        canResize={"both"}
                        onItemClick={func_handleItemClick}
                        onItemDoubleClick={(ItemId) => {
                           console.log(" ## cherif ItemId = ", ItemId);
                           console.log(" ## cherif items = ", items22[ItemId]);
                           console.log(" ## cherif items._id = ", items22[ItemId]._id)
                        }}
                        onItemMove={func_handleItemMove}
                    //    onItemResize={func_handleItemResize}
                    //   onItemDrag={func_handleItemDrag}
                    >
                        <TimelineHeaders>
                            <SidebarHeader>
                                {({ getRootProps }) => {
                                    return <div {...getRootProps()}> Date/ <br />  Code Session </div>
                                }}
                            </SidebarHeader>
                            <DateHeader unit="month"
                                labelFormat="MMMM  YYYY"

                            />
                            <DateHeader unit="day"
                                labelFormat="DD/MM"
                                style={{ height: 50 }} />
                        </TimelineHeaders>
                    </Timeline>

                </div>,






                <div style={{ height: 400, width: '100%' }}> Datagrid Grouping <br />
                    &nbsp; Grouper par <nav onClick={datagrid_grouped_by_domain} style={{ cursor: "pointer" }}> Domaine </nav>
                    <DataGridPro
                        // treeData
                        rows={rows}
                        columns={columns_no_group}
                    // getTreeDataPath={getTreeDataPath}
                    />
                </div>

                {data_row_grouped_by && String(data_row_grouped_by) === "domaine" && <div style={{ height: 400, width: '100%' }}> Datagrid Grouping <br />
                    <DataGridPro
                        treeData
                        rows={rows}
                        columns={columns}
                        getTreeDataPath={getTreeDataPath}
                    />
                </div>}

                <div>
                    <h2> EN COURS : A NE PAS SUPPRIMER enregistrement audio </h2> <br />


                    < div >
                        <button onClick={lecture_fichier_local}>Playiiii</button>
                    </div >

                    <div style={{ width: '50%', margin: 'auto' }}>
                        collection_instruction_id = '{collection_instruction_id}' <br />
                        {String(collection_instruction_id).length > 5 && <nav> Confirmation instruction en cours</nav>}
                        {String(collection_instruction_id).length <= 5 && <nav>  Enregistrer une instruction &nbsp;</nav>}

                        <AudioRecorder
                            onRecordingComplete={(blob) => addAudioElement(blob)}
                            recorderControls={recorderControls}
                            //   downloadOnSavePress={true}
                            downloadFileExtension="mp3"
                        />
                    </div>

                </div>

                <button> display mysy alert </button>

                {display_alert_mysy && String(display_alert_mysy) === "1" &&
                    <div> <Module_Alert_Confirmation alert_message={"Okkkkkkk tout va bien"}
                        alert_type={"info"}
                    />  cooooo </div>}

                <h2> Module Ediditique </h2>
                <Module_Editique conntected_employee_id={"1234"} related_collection={"session_formation"} related_collection_recid={"65b378562f89e592bf0e4b78"} />

                <Button variant="contained" className="bton_enreg"
                    onClick={afficher_champs_spec}>
                    Display Spec fields
                </Button>

                <br />



                <div className="div_row">
                    liste des events =
                    {Get_List_Agenda_Events_result && <div> {Get_List_Agenda_Events_result} </div>}

                </div>

                <div className="div_row">
                    local events =
                    <button onClick={(e) => {
                        console.log("#### local events =  ", events);
                        setdialogMessage(" coucou cherif");
                        setOpen(true);
                    }}>
                        display events
                    </button>

                </div>

                <div style={{ "width": "90%", "marginLeft": "1%" }}>
                    <FullCalendar
                        locales={allLocales}
                        locale={'fr'}
                        editable
                        selectable
                        events={events}
                        //events={mysy_events}

                        select={handleSelect}
                        headerToolbar={{
                            start: "today prev next",
                            center: "title",
                            end: "dayGridMonth,timeGridWeek,timeGridDay",
                        }}
                        //eventContent={(info) => <EventItem info={info} />}
                        //plugins={[timeGridPlugin]}
                        plugins={[timeGridPlugin, daygridPlugin, interactionPlugin]}
                        views={["dayGridMonth", "dayGridWeek", "dayGridDay"]}
                        slotMinTime="07:00"
                        slotMaxTime="20:00"
                        scrollTime='08:00'
                        displayEventEnd={true}
                        eventContent={renderEventContent}
                        eventClick={handleEventClick}


                    />;



                </div>

                <div className="div_row_gauche texte_area_filter" >
                    <TextField
                        name="document_name"
                        label="Choisir un document"
                        select
                        sx={{ m: 1, width: '100%' }}
                        value={p_document_name}
                        onChange={(e) => {
                            setp_document_name(e.target.value);
                        }}
                    >
                        <MenuItem value="convocation" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Convocation &nbsp;</MenuItem>
                        <MenuItem value="document2" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Document 2  &nbsp;</MenuItem>
                        <MenuItem value="document3" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Document 3&nbsp;</MenuItem>
                        <MenuItem value="document4" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Document 4 &nbsp;</MenuItem>


                    </TextField>
                </div>

                {p_document_name && <div className="div_row_gauche texte_area_filter" >
                    <TextField
                        name="document_type"
                        label="Type de document"
                        select
                        sx={{ m: 1, width: '100%' }}
                        value={p_document_type}
                        onChange={(e) => {
                            setp_document_type(e.target.value);

                        }}
                    >
                        <MenuItem value="pdf" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Pdf &nbsp;</MenuItem>
                        <MenuItem value="sms" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >SMS  &nbsp;</MenuItem>
                        <MenuItem value="email" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Email&nbsp;</MenuItem>


                    </TextField>
                </div>
                }

                {p_document_name && <div className="div_row_gauche texte_area_filter" >
                    <TextField
                        name="document_ref_interne"
                        label="Code Document"
                        sx={{ m: 1, width: '100%' }}
                        value={p_document_ref_interne}
                        onChange={(e) => {
                            setp_document_ref_interne(e.target.value);

                        }}
                    />

                </div>}

                {p_document_name && <div className="div_row_gauche texte_area_filter" >
                    <TextField
                        name="document_sujet"
                        label="Sujet"
                        sx={{ m: 1, width: '100%' }}
                        value={p_document_sujet}
                        onChange={(e) => {
                            setp_document_sujet(e.target.value);

                        }}
                    />

                </div>}



                <div className="div_row">
                    <div style={{ "width": "48%", "marginLeft": "1rem", "float": "left" }}>
                        <div className="titre_training_text"> Programme (max 1000 caractères) </div>
                        <Editor
                            id="cherif"
                            onInit={(evt, editor) => editorRef_programme.current = editor}
                            initialValue={field_programme}
                            onKeyUp={editor_keyup}
                            onEditorChange={(newValue, editor) => {
                                if (String(editor_tochange) === "1") {
                                    //alert(" change");
                                    DataUpdated();
                                    seteditor_tochange("");
                                }
                            }}
                            init={{
                                resize: false,
                                height: 500,
                                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; }'
                            }}
                        />
                        <Button className="bton_enreg" onClick={Add_one_Partner_Document} style={{ "margin": "1rem" }}
                        >Ajouter &nbsp;

                        </Button>


                        <Button className="bton_suppr" onClick={delete_document} style={{ "margin": "1rem" }}
                        > Supprimer &nbsp;

                        </Button>
                    </div>



                    <div style={{ "width": "48%", "marginLeft": "1rem", "float": "left" }}>
                        <div className="titre1"> Action </div>


                        <div className="div_row">

                            <div className="session_caract"> Choisir un objet  <br />
                                <TextField
                                    name="collection"
                                    id="collection"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_collection}
                                    onChange={(e) => {
                                        setp_collection(e.target.value);


                                    }}
                                >

                                    {Get_Personnalisable_Collections_result &&
                                        Get_Personnalisable_Collections_result.map((mycollection) => (
                                            <MenuItem key={JSON.parse(mycollection).collection_technical_name}
                                                value={JSON.parse(mycollection).collection_technical_name}
                                                style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%", "fontSize": "12px" }}>
                                                {JSON.parse(mycollection).collection_fonctional_name}&nbsp;&nbsp;

                                            </MenuItem>
                                        ))}


                                </TextField>

                            </div>
                            {<div className="session_caract"> Choisir un champ  <br />
                                <TextField
                                    name="champ_table"
                                    id="champ_table"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_champ_table}
                                    onChange={(e) => {
                                        setp_champ_table(e.target.value);
                                    }}
                                >

                                    {Get_Personnalisable_Collection_and_Fields_result &&
                                        Get_Personnalisable_Collection_and_Fields_result.filter((local_mymanager) => JSON.parse(local_mymanager).collection_technical_name === p_collection).map((mycollection) => (
                                            <MenuItem key={JSON.parse(mycollection).field_technical_name}
                                                value={JSON.parse(mycollection).field_technical_name}
                                                style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%", "fontSize": "12px" }}>
                                                {JSON.parse(mycollection).field_fonctional_name}&nbsp;&nbsp;

                                            </MenuItem>
                                        ))}
                                </TextField>

                            </div>}




                        </div>



                        <Button className="bton_enreg" onClick={add_selected_fields} style={{ "margin": "1rem" }}
                        >Ajouter Champ Choisi &nbsp;

                        </Button>

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

    )
}


export default TestUrl_New;