examCard

import React, { useEffect, useState } from "react";

import { Card } from "react-bootstrap";
import { MdRateReview } from "react-icons/md";
import { FcBusinessman } from "react-icons/fc";
import { MdDateRange } from "react-icons/md";
import { Box, Grid, Paper, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import coins from "../../../assets/images/coins.png";

import examinee from "../../../assets/images/examinee.png";
import running from "../../../assets/images/running.png";
import { examDetails, helloBcsImg } from "../../../urls";
import { useWindowSize } from "use-window-size-hook";
import { useHistory } from "react-router";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(3),

    color: theme.palette.text.secondary,
  },
  titleStyle : {
    fontSize: "12px",fontWeight : "bold",
    overflow: 'hidden',
    textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',

             width : "95%",
             textAlign : "left"
  },
  rootImage : {
   height: "50px", width: "50px"
  },
  iconText : {
    marginLeft: "5px",
    fontSize: "15px",
    fontWeight: "bold",
  },
  runningIconText : {
    fontWeight: "bold",
                fontSize: "10px",
                marginLeft: "5px",
  },

  container2: {
   marginTop: "20px"
  },
  iconStyle : {
  height : "18px"
  }



}));

const ExamCard = (props) => {
  // const { width } = useWindowSize();

  const history = useHistory();

  const { exam, img } = props;

  const { cost } = exam;

  const Image = img[0].image || helloBcsImg();

  const classes = useStyles();

  const routeChange = (program, id) => {
    return history.push(examDetails(program, id, exam.state));
  };



  const size = useWindowSize();

  const [timeLeft, setTimeLeft] = useState(
    new Date(exam.end_time).getTime() - new Date().getTime()
  );



  useEffect(() => {
    if (timeLeft<1) {
      return;
    }

    const intervalId = setInterval(() => {
      setTimeLeft(timeLeft - 1000);
      console.log('intervalId');
    }, 1000);


    return () => clearInterval(intervalId);
  }, [timeLeft]);

  // useEffect(()=>
  // {
  //   return ()=>
  //   {

  //   }
  // })

  const getTimeFormat = () => {
    let h, m, s;
    h = Math.floor(timeLeft / 3600000);
    m = Math.floor((timeLeft / 3600000 - h) * 60);
    s = Math.floor(((timeLeft / 3600000 - h) * 60 - m) * 60);

    s < 10 ? (s = `0${s}`) : (s = `${s}`);
    m < 10 ? (m = `0${m}`) : (m = `${m}`);
    h < 10 ? (h = `0${h}`) : (h = `${h}`);

    return `${h} :${m}: ${s}`;
  };

  // console.log('crv crv ',timeLeft);

  return (
    <Box  style={{ margin: "20px 10px 10px 10px" }}>
      <Paper style={{ width: "100%", padding: "10px" }}  onClick={()=>routeChange(exam.program,exam.id)}>
        <Grid
          container

          direction="row"
          justify="center"

          spacing={1}
        >
          <Grid
            item
            xs={9}
            container
            justify="center"
            direction="column"
            alignItems="flex-start"

          >
            <Typography className = {classes.titleStyle}> {exam.title}

            </Typography>
          </Grid>

          <Grid item xs={3} container    justify="flex-end"

          >


        <Paper>

        <img

             className={classes.rootImage}
              src={Image}
              alt=""
            ></img>



        </Paper>





          </Grid>
        </Grid>

        <Grid
          container
          spacing={1}

          className = {classes.container2}

          justify="center"
          alignItems="center"



        >
          <Grid
            item
            xs={4}
            container
            style={{ textAlign: "center" }}
            justify="center"
            alignItems="center"
          >
            <Grid item>
              <img className = {classes.iconStyle} src={running} alt=""></img>
            </Grid>

            <Grid
              item
            className = {classes.runningIconText}
            >
              <Grid item >
                Running
              </Grid>

              <Grid item style={{fontSize : "8px",textAlign : 'center'}}>
                {getTimeFormat()}
              </Grid>
            </Grid>
          </Grid>

          <Grid  item xs={4}    style={{textAlign : 'center',
        margin : "auto"}} >


           <Grid item>
           <img className = {classes.iconStyle} src={examinee} alt=""></img>

           <span

              className ={classes.iconText}
              >
                {exam.statistics.total_examinees || 0}
           </span>
           </Grid>









          </Grid>

          <Grid item xs={4}>
            <span>
              {" "}
              <img className={classes.iconStyle} src={coins} alt=''></img>
              <span
              className={classes.iconText}
              >
                {cost}
              </span>
            </span>
          </Grid>
        </Grid>
      </Paper>
    </Box>


  );
};

export default ExamCard;