import React, { memo, useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import "./style.css";
import { Row, Col, Button, Space, Popover } from 'antd';
import { MdFlipCameraAndroid, FaEyeSlash, MdInfo, IoChevronForwardSharp } from 'react-icons/all';

var Instruction = function Instruction(props) {
  var currentExercise = props.currentExercise,
      toogleInvertVideo = props.toogleInvertVideo;

  var _useState = useState(true),
      toogleInstruction = _useState[0],
      setToogleInstruction = _useState[1];

  var contentInfo = currentExercise && /*#__PURE__*/React.createElement("div", {
    className: "info-box"
  }, /*#__PURE__*/React.createElement("p", null, currentExercise.description === 'undefined' ? 'no description.' : currentExercise.description));
  return /*#__PURE__*/React.createElement(React.Fragment, null, toogleInstruction === false && /*#__PURE__*/React.createElement(Button, {
    className: "btn-show-instruction-video",
    type: "primary",
    size: "large",
    icon: /*#__PURE__*/React.createElement(IoChevronForwardSharp, {
      size: "22px"
    }),
    onClick: function onClick() {
      return setToogleInstruction(!toogleInstruction);
    }
  }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: toogleInstruction ? 'instruction' : 'instruction hide'
  }, /*#__PURE__*/React.createElement("div", {
    className: "instruction-container"
  }, props.children, /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 589 350",
    version: "1.1"
  }, /*#__PURE__*/React.createElement("title", null, "Group 17"), /*#__PURE__*/React.createElement("g", {
    id: "Hud",
    stroke: "none",
    strokeWidth: "1",
    fill: "none",
    fillRule: "evenodd"
  }, /*#__PURE__*/React.createElement("g", {
    id: "overlay-template-copy-6",
    transform: "translate(-98.000000, -581.000000)",
    fill: "#FFFFFF"
  }, /*#__PURE__*/React.createElement("g", {
    id: "Group-17",
    transform: "translate(98.000000, 581.914062)"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M-10,151.179687 L3.7109375,138 L76.7109375,138 L84.8554688,145.263672 L207.107422,145.263672 C207.107422,145.327049 208.119857,146.440981 210.144726,148.605469 C201.126785,148.991163 159.030365,148.991163 83.8554688,148.605469 L8.47070313,148.605469 L1,155.938477 L1,263.085937 L1,284.226563 L1,338.085938 L-2.04003906,335.02832 L-2.5,285.226563 L-10,277.626953 L-10,263.085937 L-10,151.179687 Z",
    id: "Rectangle",
    transform: "translate(100.072363, 238.042969) rotate(-90.000000) translate(-100.072363, -238.042969) "
  }), /*#__PURE__*/React.createElement("path", {
    d: "M378,24.1796875 L391.710937,11 L464.710938,11 L472.855469,18.2636719 L595.107422,18.2636719 C595.107422,18.3270492 596.119857,19.4409815 598.144726,21.6054688 C589.126785,21.9911629 547.030365,21.9911629 471.855469,21.6054688 L396.470703,21.6054688 L389,28.9384766 L389,136.085937 L389,157.226563 L389,211.085938 L385.959961,208.02832 L385.5,158.226563 L378,150.626953 L378,136.085937 L378,24.1796875 Z",
    id: "Rectangle",
    transform: "translate(488.072363, 111.042969) rotate(90.000000) translate(-488.072363, -111.042969) "
  }))))), /*#__PURE__*/React.createElement("div", {
    className: "instruction-actions"
  }, /*#__PURE__*/React.createElement(Space, {
    style: {
      width: '100%'
    }
  }, toogleInvertVideo && /*#__PURE__*/React.createElement(Button, {
    type: "link",
    shape: "circle",
    icon: /*#__PURE__*/React.createElement(MdFlipCameraAndroid, {
      size: "22px"
    }),
    onClick: toogleInvertVideo
  }), currentExercise && /*#__PURE__*/React.createElement(Popover, {
    placement: "topLeft",
    content: contentInfo,
    title: currentExercise.title
  }, /*#__PURE__*/React.createElement(Button, {
    type: "link",
    shape: "circle",
    icon: /*#__PURE__*/React.createElement(MdInfo, {
      size: "22px"
    })
  })), /*#__PURE__*/React.createElement(Button, {
    type: "link",
    shape: "circle",
    icon: /*#__PURE__*/React.createElement(FaEyeSlash, {
      size: "22px"
    }),
    onClick: function onClick() {
      return setToogleInstruction(!toogleInstruction);
    }
  }))), currentExercise && /*#__PURE__*/React.createElement("div", {
    className: "info-instruction"
  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
    span: 6
  }, /*#__PURE__*/React.createElement("h1", null, "weekly: "), currentExercise.frequencyPerWeek, "x"), /*#__PURE__*/React.createElement(Col, {
    span: 6
  }, /*#__PURE__*/React.createElement("h1", null, "daily: "), currentExercise.setsPerDay, "x"), /*#__PURE__*/React.createElement(Col, {
    span: 6
  }, /*#__PURE__*/React.createElement("h1", null, "sets: "), currentExercise.setsPerSessions, "x"), /*#__PURE__*/React.createElement(Col, {
    span: 6
  }, /*#__PURE__*/React.createElement("h1", null, "reps: "), currentExercise.repetitions, "x")))))));
};

export default memo(Instruction);