import React from "react";
import { Button, } from "reactstrap";
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share";
import { SocialIcon } from 'react-social-icons';
import happyimg from "../mysy_img/happy.png";
import unhappyimg from "../mysy_img/nothappy.png";
import middleimg from "../mysy_img/middle.png";
import parse from 'html-react-parser'

const Article = (props) => {

  //console.log({ props });


  return (

    <div className="formation Article">
      <div className="forma_rightbox"  onClick={(e) => {
                e.preventDefault();
                window.location.href = "/Display-Detail-Article/" + props.article.internal_url
              }}>

        <div className="p_forma">
          <div>
            <div style={{ 'float': "left", "width": "50%", marginBottom: '0.1rem', textAlign:'justify' }}>
              <b>{props.article.title_formation} </b><br />
            </div>
            <div style={{ 'float': "left", "width": "20%", marginBottom: '0.1rem', textAlign:'center',
             marginLeft:'auto', marginRight:'auto', fontWeight:'bolder',  }}>
              {(props.article).note}

              {props.article.note > "4" &&
                <img class="img_note_class" src={happyimg} align="right" alt="MySy Training profile image" />
              }

              {props.article.note <= "2" &&
                <img class="img_note_class" src={unhappyimg} align="right" alt="MySy Training profile image" />
              }

              {props.article.note > "2" && props.article.note <= "4" &&
                <img class="img_note_class" src={middleimg} align="right" alt="MySy Training profile image" />
              }


            </div>
            <div style={{ 'float': "right", "width": "30%", marginBottom: '0.1rem', textAlign: "right", paddingRight: "0.3rem" }}>
              {(String(props.article.date_avis)).substring(0, 10)} <br />
            </div>
          </div>


          <div  style={{ 'float': "left", "width": "98%", marginBottom: '0.1rem', textAlign:'justify' }}>

          {parse(String(props.article.avis))} <br />
            
           
          </div>

        </div>
        <div style={{ "width": "100%", "margin-top": "0.2rem" }}>

          <div style={{ 'float': "right", "width": "30%", textAlign: "right", marginTop: "0.6rem", }}>
            <Button variant="contained" color="success"
              style={{
                'borderRadius': "10rem", "width": "100%",
                "width": "60% !important", background: "#104277"
              }}
              onClick={(e) => {
                e.preventDefault();
                window.location.href = "/Display-Detail-Article/" + props.article.internal_url
              }}
            >Voir detail</Button>
          </div>

          <div style={{ 'float': "left", "width": "30%", marginTop: "0.6rem", }}>
            <div className="media_sociaux">
              <FacebookShareButton
                url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}

                quote={props.article.title_formation + " -- " + props.article.avis}
                hashtag={"#MySyTraining"}
              >
                <SocialIcon network="facebook" className="SocialIcon" />
              </FacebookShareButton>
              &nbsp;

              <TwitterShareButton
                url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}
                hashtag={"#MySyTraining"}
              >
                <SocialIcon network="twitter" className="SocialIcon" />
              </TwitterShareButton>

              &nbsp;
              <LinkedinShareButton
                url={"https://www.mysy-training.com/Display-Detail-Article/" + props.article.internal_url}
                title={" Un avis sur  : " + props.article.title_formation}
                summary={props.article.title_formation + " -- " + props.article.avis}
                source={"https://www.mysy-training.com/"}

              >
                <SocialIcon network="linkedin" className="SocialIcon" />
              </LinkedinShareButton>


            </div>

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


export default Article;