import React, { useRef, useState, useEffect } from "react";
import { useParams } from 'react-router-dom'
import axios from "axios";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import { Helmet } from "react-helmet";
import 'react-slideshow-image/dist/styles.css'
import { Fade } from 'react-slideshow-image';
import slideimg1 from "../mysy_img/education.jpg";
import slideimg4 from "../mysy_img/mysy_img.png";
import Footer from "./Fotter";
import Header from "./Header";
/*
/!\ important: les images du slides doivent avoir une dimension de : 250 X 450
*/
import { Button, } from "reactstrap";
import { useHistory } from "react-router-dom";
import { useCookies } from "react-cookie";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import { confirmAlert } from 'react-confirm-alert';

const DisplayDetailClass = (props) => {

  const { classId } = useParams();
  const [result, setResult] = useState("");
  const [myApiResponse, setmyApiResponse] = useState();
  const [DetailTraining, setDetailTraining] = useState([]);
  const [closepopup, setclosepopup] = useState(0);
  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 [mynote, setmynote] = useState(0);
  const [userconnected, setuserconnected] = useState("0");
  const [someoneconnected, setsomeoneconnected] = useState("0");
  const [partnerconnected, setpartnerconnected] = useState("0");
  const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);
  const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);

  // Gestion des Cookies
  const stored_partner = cookie_part.tokenmysypart;
  const stored_user = cookie.tokenmysych;


  useEffect(() => {
    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");
      local_user_connect = 1;
    }

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

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

    Display();



  }, []);


  function contactUs(e) {

    var sender_mail = "";
    var sender_tel = "";
    var token = "";
    if (String(userconnected) === "0") {
      sender_mail = document.getElementsByName("usermail")[0].value;
      sender_tel = document.getElementsByName("usernumtel")[0].value;
      if (sender_mail.length == 0 && sender_tel.length == 0) {
        alert(" Les information fournies sont incorrectes ");
        return;
      }
    } else {
      token = String(stored_user)

    }


    var useravis = document.getElementsByName("useravis")[0].value;
    var usersupqual = document.getElementsByName("userqualsup")[0].value;
    var usernote = document.getElementsByName("usernote")[0].value;

    if (useravis.length < 20 || usersupqual.length < 20 || usernote.length < 0) {
      alert("Merci de saisir le nombre minimum de caractère requis pour les champs ");
      return;
    }


    var re = /\S+@\S+\.\S+/;
    if (re.test(sender_mail) == false) {
      alert("l'email est incorrecte");
      return;
    }


    ////console.log("contacter " + sender_mail + " - " + sender_tel + " - ")


    //alert("contacter "+sender_mail+" - "+sender_tel+" - "+usermessage+" - url = "
    //+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude);
    var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/";
    var form = new FormData();
    form.append("type", "email");
    form.append("recever_mail", "");
    form.append("recever_tel", "");
    form.append("sender_mail", sender_mail);
    form.append("sender_tel", sender_tel);
    form.append("object", DetailTraining["external_code"]);
    form.append("token", "");
    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);

    axios.post(myurl, form).then(res => {
      if (res.data.status != "False") {
        //console.log(" In test  res.data.status = " + res.data.status);
        //console.log(" In test  res.data.message = " + res.data.message);
        setclosepopup(1);
        document.getElementsByName("usermail")[0].value = "";
        document.getElementsByName("usernumtel")[0].value = "";
        document.getElementsByName("usercomment")[0].value = "";
      }
      else {
        //console.log(" contact-nous  statut = " + res.data.status);
        //console.log(" contact-nous   res.data.message = " + res.data.message);
      }
    }).catch((error) => {
      console.warn('contact-nous  Not good man :( mysearchtext = ');

    })


  }

  function Display(e) {
    var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class/";
    var form = new FormData();
    form.append("internal_url", classId);
    form.append("token", "");
    // Ajout des info IP user
    form.append("user_ip", IPv4);
    form.append("user_country_code", country_code);
    form.append("user_country_name", country_name);
    form.append("user_city", city);
    form.append("user_postal", postal);
    form.append("user_latitude", latitude);
    form.append("user_longitude", longitude);
    form.append("user_state", state);


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

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

          if (String(JSON.parse(res.data.message).coeur) !== String("1") &&
            String(JSON.parse(res.data.message).freeacces) !== String("1")) {

            //alert(" ce n'est pas un coeur = " + JSON.parse(res.data.message).coeur)
            // Verification si on est en mode connecté ou non.
            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");
              local_user_connect = 1;
            }

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

            if (local_user_connect === 0 && local_part_connect === 0) {
              confirmAlert({
                title: 'Connexion ?',
                message: 'Connectez-vous pour acceder au detail de cette formation',
                buttons: [
                  {
                    label: 'Vous avez un compte',
                    onClick: () => { history.push("/mysy-training-login/training/" + classId) }
                  },
                  {
                    label: "Vous n'avez pas de compte",
                    onClick: () => { history.push("/create_account") }
                  },

                ],
                closeOnEscape: false,
                closeOnClickOutside: false,
                keyCodeForClose: [8, 32],
                willUnmount: () => { },
                afterClose: () => { },
                onClickOutside: () => { },
                onKeypress: () => { },
                onKeypressEscape: () => { },
              });


            }
          } else {
            //alert(" c'est pas un coeur = " + JSON.parse(res.data.message).coeur)
          }
        }
        else {
          setmyApiResponse("False");
        }
        //console.log(" In displaydetailclass   res.data.status = " + res.data.status);
        //console.log(" In displaydetailclass  res.data.message = " + res.data.message);
        setResult(res.data.message);
        setDetailTraining(JSON.parse(res.data.message));
      }
      else {
        //console.log(" In Erreur   res.data.status = " + res.data.status);
        //console.log(" In Erreur  res.data.message = " + res.data.message);
        setmyApiResponse("False");


      }


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

    })


  }

  const history = useHistory();

  const fadeImages = [
    {
      url: slideimg1,
    },

    {
      url: slideimg4,
    },
  ];


  function CheckAvis(e) {

    const val = document.getElementById("useravis").value
    //alert(" evalu " + val);
    if (val.length < 20) {
      alert(" Le champ 'Avis' doit etre plus renseigné");
    }
    //alert(val);
  }

  function CheckNote(e) {
    const val = e.target.value;

    if (isNaN(val)) {
      //alert(val + " is not a number <br/> mynote = "+mynote);
      document.getElementById("usernote").value = mynote;
    } else {
      if (val > 5) {
        alert(" Valeur Maxi doit etre 5");
        document.getElementById("usernote").value = mynote;
      } else {
        setmynote(val);
      }
    }

  }

  const [submenu, setsubmenu] = useState("formateur");
  function submenu_info() {
    setsubmenu("formateur");
    if (document.getElementsByName("menu_formateur")[0])
      document.getElementsByName('menu_formateur')[0].focus();

    if (document.getElementsByName("menu_datelieu")[0])
      document.getElementsByName('menu_datelieu')[0].blur();

    if (document.getElementsByName("submenu_divers")[0])
      document.getElementsByName('submenu_divers')[0].blur();
  }

  function submenu_datelieu() {
    setsubmenu("datelieu");
    if (document.getElementsByName("menu_datelieu")[0])
      document.getElementsByName('menu_datelieu')[0].focus();

    if (document.getElementsByName("menu_formateur")[0])
      document.getElementsByName('menu_formateur')[0].blur();

    if (document.getElementsByName("submenu_divers")[0])
      document.getElementsByName('submenu_divers')[0].blur();
  }


  function submenu_divers() {
    setsubmenu("divers");
    if (document.getElementsByName("submenu_divers")[0])
      document.getElementsByName('submenu_divers')[0].focus();

    if (document.getElementsByName("menu_datelieu")[0])
      document.getElementsByName('menu_datelieu')[0].blur();

    if (document.getElementsByName("submenu_divers")[0])
      document.getElementsByName('submenu_divers')[0].blur();
  }

  /// ----
  return (


    <div className="displaydetailclass">

      <Helmet>
        <meta name="description" content="Liste des articles sur les formations" />
        <meta name="robots" content="index,follow" />
        <meta name="title" content={DetailTraining["title"]} />
        <link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/" + `${DetailTraining["internal_url"]}`} />
        <title> {`${DetailTraining["title"]}`} </title>
      </Helmet>

      <Header />

      <div className="div_mobile">
        <h1 className="h1_transparent">{`${DetailTraining["title"]}`}</h1>


        <div>
          {String(myApiResponse) === String("False") &&
            <div className="koUpdateData">
              Impossible de recuperer la formation. Merci de contacter le support.
            </div>
          }



          {myApiResponse === "True" &&
            <div className="display_screen_max_600">

              <div>


              </div>

              <div >
                <div className="detail_rightbox_right2" style={{ "textAlign": "center", "fontSize": "small" }}>

                  <b>  {DetailTraining["title"]} </b>
                </div>

                {DetailTraining["description"] && <div className="detail_rightbox_right2">
                  <b> Description</b><br />
                  <p>
                    {DetailTraining["description"]}
                  </p>

                </div>}

                {DetailTraining["objectif"] && <div className="detail_rightbox_right2">
                  <b> Objectif</b><br />
                  <p>
                    {DetailTraining["objectif"]} &nbsp;
                  </p>

                </div>}

                {!DetailTraining["objectif"] && <div className="detail_rightbox_right2">
                  <b> Objectif</b><br />
                  <p>
                    <i>En cours</i>
                  </p>

                </div>}


                {DetailTraining["pointsfort"] && <div className="detail_rightbox_right2">
                  <b> Points forts</b><br />
                  <p>
                    {DetailTraining["pointsfort"]} &nbsp;
                  </p>

                </div>}

                {!DetailTraining["pointsfort"] && <div className="detail_rightbox_right2">
                  <b> Points forts</b><br />
                  <p>
                    <i>En cours</i>
                  </p>

                </div>}


              </div>
              <div className="detail_row">
                {DetailTraining["certif"] && <div className="detail_rightbox_left1">
                  <b>Certifiante </b> <br />
                  {DetailTraining["certif"]}

                </div>}

                {!DetailTraining["certif"] && <div className="detail_rightbox_left1">
                  <b>Certifiante </b> <br />
                  <i>NC</i>

                </div>}


                <div className="detail_rightbox_right1">
                  <b>Prix </b> <br />
                  {DetailTraining["price"]} €

                </div>

              </div>

              <div className="detail_row">
                <div className="detail_rightbox_left1">
                  <b> Distanciel</b><br />
                  {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && <div> Oui </div>}
                  {DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" && <div> Non </div>}

                </div>
                <div className="detail_rightbox_right1">
                  <b> Presentiel</b><br />
                  {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && <div> Oui </div>}
                  {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" && <div> Non </div>}
                </div>

              </div>


              <div className="detail_row">
                <div className="detail_rightbox_right1">
                  <b> Durée</b><br />
                  {DetailTraining["duration"]} &nbsp; {DetailTraining["duration_unit"]}

                </div>
              </div>
              <div style={{ "textAlign": "left" }}>
                  <Button variant="outlined" onClick={submenu_info} className="detail_class_submenu" id='menu_formateur' name='menu_formateur'>Formateur</Button>
                  <Button variant="outlined" onClick={submenu_datelieu} className="detail_class_submenu" id='menu_datelieu' name='menu_datelieu'>Date & Lieu</Button>
                  <Button variant="outlined" onClick={submenu_divers} className="detail_class_submenu" id='menu_divers' name='menu_divers'>Divers</Button>

                  {/*<hr className="hr_height" />*/}

                  <div>
                    {String(submenu) === String("formateur") && <div className="detail_class_submenu_data">
                      {DetailTraining.trainer && <div>
                        <br/>
                        {DetailTraining.trainer}
                      </div>}

                      {!DetailTraining.trainer && <div>
                        <br/>
                        <i>NC </i>
                      </div>}

                    </div>}

                    {String(submenu) === String("datelieu") && <div className="detail_class_submenu_data">
                      {DetailTraining.datelieu && DetailTraining.datelieu.map((datelieu) => (
                        <div>
                          A  {datelieu.ville} , le   {datelieu.date}
                        </div>

                      ))}

                    </div>}

                    {String(submenu) === String("divers") && <div className="detail_class_submenu_data">
                      divers
                    </div>}
                  </div>

                </div>
              <div className="detail_row">
                &nbsp;
              </div>

              <div className="detail_rightbox_right_button_acces">
                <Button variant="contained"
                  color="success"
                  className="accesformation"
                  onClick={(e) => {
                    e.preventDefault();
                    window.open(
                      DetailTraining["url"],
                      '_blank'
                    );

                  }}>Accedez à la formation</Button>


              </div>

              <div>
                <br />&nbsp;

                <div>


                  <div className="detail_rightbox_right2" style={{ textAlign: 'center', border: 0 }}>
                    <FacebookShareButton
                      url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}

                      quote={DetailTraining["title"] + " -- " + DetailTraining["description"]}
                      hashtag={"#MySyTraining"}
                    >
                      <SocialIcon network="facebook" style={{ height: 35, width: 35 }} />
                    </FacebookShareButton>
                    &nbsp;

                    <TwitterShareButton
                      url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
                      hashtag={"#MySyTraining"}
                    >
                      <SocialIcon network="twitter" style={{ height: 35, width: 35 }} />
                    </TwitterShareButton>

                    &nbsp;
                    <LinkedinShareButton
                      url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
                      title={" Une nouvelle formation : " + DetailTraining["title"]}
                      summary={DetailTraining["title"] + " -- " + DetailTraining["description"]}
                      source={"https://www.mysy-training.com/"}

                    >
                      <SocialIcon network="linkedin" style={{ height: 35, width: 35 }} />
                    </LinkedinShareButton>


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


            </div> 
          }


          {myApiResponse == "True" &&

            <div className="display_screen_min_601">

              <div>

              </div>

              <div className="detail_leftbox">


                <div className="pub">
                  <div className="slide-container">
                    <Fade>
                      {fadeImages.map((fadeImage, index) => (
                        <div className="each-fade" key={index}>
                          <div className="image-container">
                            <img src={fadeImage.url} className="slide_img" />
                          </div>
                          <h2>{fadeImage.caption}</h2>
                        </div>
                      ))}
                    </Fade>
                  </div>
                </div>


              </div>



              <div className="detail_rightbox">

                <div className="titre_formation">
                  {DetailTraining["title"]}
                </div>


                <div className="description">
                  <div className="titre1"> Description</div>
                </div>
                <p className="description">
                  {DetailTraining["description"]}
                </p>
                <div className="description">

                  <div className="titre1"> Objectif</div>
                  {DetailTraining["objectif"] && <p>
                    {DetailTraining["objectif"]} &nbsp;
                  </p>}
                  {!DetailTraining["objectif"] && <p style={{ "fontStyle": "italic" }}>
                    En cours &nbsp;
                  </p>}

                </div>

                <div className="description">
                  <div className="titre1"> Points forts</div>


                  {DetailTraining["pointsfort"] && <p>
                    {DetailTraining["pointsfort"]} &nbsp;
                  </p>}

                  {!DetailTraining["pointsfort"] && <p style={{ "fontStyle": "italic" }}>
                    En cours  &nbsp;
                  </p>}


                </div>

                <div className="titre1"> Caracteristiques</div>

                <div className="block">
                  <b > Prix</b><br />

                  {DetailTraining["price"]} €

                </div>
                <div className="block">
                  <b> langue</b><br />

                  {DetailTraining["lang"]}
                </div>


                <div className="block">
                  <b> Durée</b><br />

                  {DetailTraining["duration"]} &nbsp; {DetailTraining["duration_unit"]}
                </div>



                {DetailTraining["certif"] && <div className="block">
                  <b> Certifiante</b><br />
                  {DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && <div>

                    Non  &nbsp; </div>
                  }


                  {DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && <div>

                    Oui  &nbsp; </div>
                  }
                </div>}


                <div className="block">
                  <b> Distanciel</b><br />
                  {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && <div> Oui </div>}
                  {DetailTraining.presentiel && DetailTraining.presentiel.distantiel !== "1" && <div> Non </div>}

                </div>
                <div className="block">
                  <b> Presentiel</b><br />
                  {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && <div> Oui </div>}
                  {DetailTraining.presentiel && DetailTraining.presentiel.presentiel !== "1" && <div> Non </div>}

                </div>
                &nbsp;
                <div>

                </div>
                <div style={{ "width": "10%" }}>  &nbsp; </div>

                <div style={{ "textAlign": "left" }}>
                  <Button variant="outlined" onClick={submenu_info} className="detail_class_submenu" id='menu_formateur' name='menu_formateur'>Formateur</Button>
                  <Button variant="outlined" onClick={submenu_datelieu} className="detail_class_submenu" id='menu_datelieu' name='menu_datelieu'>Date & Lieu</Button>
                  <Button variant="outlined" onClick={submenu_divers} className="detail_class_submenu" id='menu_divers' name='menu_divers'>Divers</Button>

                  {/*<hr className="hr_height" />*/}

                  <div>
                    {String(submenu) === String("formateur") && <div className="detail_class_submenu_data">
                      {DetailTraining.trainer && <div>
                        <br/>
                        {DetailTraining.trainer}
                      </div>}

                      {!DetailTraining.trainer && <div>
                        <br/>
                        <i>NC </i>
                      </div>}

                    </div>}

                    {String(submenu) === String("datelieu") && <div className="detail_class_submenu_data">
                      {DetailTraining.datelieu && DetailTraining.datelieu.map((datelieu) => (
                        <div>
                          A  {datelieu.ville} , le   {datelieu.date}
                        </div>

                      ))}

                    </div>}

                    {String(submenu) === String("divers") && <div className="detail_class_submenu_data">
                      divers
                    </div>}
                  </div>

                </div>
              </div>



              <div style={{ "width": "50%", "float": "right", "marginTop": "0.5rem" }}>
                <div style={{ "float": "left", "width": "40%", "textAlign": "left" }}>
                  <FacebookShareButton
                    url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}

                    quote={DetailTraining["title"] + " -- " + DetailTraining["description"]}
                    hashtag={"#MySyTraining"}
                  >
                    <SocialIcon network="facebook" style={{ height: 35, width: 35 }} />
                  </FacebookShareButton>
                  &nbsp;

                  <TwitterShareButton
                    url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
                    hashtag={"#MySyTraining"}
                  >
                    <SocialIcon network="twitter" style={{ height: 35, width: 35 }} />
                  </TwitterShareButton>

                  &nbsp;
                  <LinkedinShareButton
                    url={"https://www.mysy-training.com/Display-Detail-formation/" + DetailTraining['external_code']}
                    title={" Une nouvelle formation : " + DetailTraining["title"]}
                    summary={DetailTraining["title"] + " -- " + DetailTraining["description"]}
                    source={"https://www.mysy-training.com/"}

                  >
                    <SocialIcon network="linkedin" style={{ height: 35, width: 35 }} />
                  </LinkedinShareButton>

                </div>

                <div style={{ "float": "right", "width": "40%", "textAlign": "right" }}>
                  <Button variant="contained"
                    color="success"
                    className="accesformation"
                    onClick={(e) => {
                      e.preventDefault();
                      window.open(
                        DetailTraining["url"],
                        '_blank'
                      );

                    }}> Accedez à la formation</Button>
                </div>
              </div>

            </div>

          }


        </div>

        <div className="pieddepage">
          <Footer />
        </div>


      </div>


    </div>
  )
}


export default DisplayDetailClass;