import React, { useState } from 'react';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

import ModalComponent from "./ModalComponent";
import EmptyData from "../../components/EmptyData";
import { Row, Col, Input, Button, Select, Space, Checkbox, Popconfirm, message } from 'antd';
var Search = Input.Search;
var Option = Select.Option;
import { IoMdTrash, FaCog, MdPlayCircle } from 'react-icons/all';
import "./style.css";
import { useDispatch, useSelector } from 'react-redux';
import { updateVideoOnObjectToSave, setSelectedVideoId, deleteVideoFromLibrary, savePhysioterapistVideoToPatient, initSequence } from "../../store/rehab/main";

var Library = function Library(props) {
  var dispatch = useDispatch();

  var _useSelector = useSelector(function (state) {
    return state.rehab.main;
  }),
      libraryVideos = _useSelector.libraryVideos,
      objectToSave = _useSelector.objectToSave;

  var _useState = useState(false),
      isModalVisible = _useState[0],
      setIsModalVisible = _useState[1];

  var _useState2 = useState(null),
      contentType = _useState2[0],
      setContentType = _useState2[1];

  var handleOk = function handleOk() {
    setIsModalVisible(false);
  };

  var onSearch = function onSearch(value) {
    return props.onSearchExerciseFromLibrary(value);
  };

  var onChanceCheckbox = function onChanceCheckbox(e, id) {
    dispatch(updateVideoOnObjectToSave({
      checked: e.target.checked,
      values: {
        rehabLibraryId: id
      }
    }));
  };

  var handleCancel = function handleCancel() {
    setIsModalVisible(false);
  };

  var showModal = function showModal(value, id) {
    if (id === void 0) {
      id = null;
    }

    dispatch(setSelectedVideoId(id));
    setContentType(value);
    setIsModalVisible(true);
  };

  var confirm = function confirm(id) {
    dispatch(deleteVideoFromLibrary(id));
  };

  var onClickSend = function onClickSend() {
    dispatch(savePhysioterapistVideoToPatient(objectToSave));
    dispatch(initSequence());
  };

  var tooglePlayPauseVideo = function tooglePlayPauseVideo(e, index) {
    var myVideo = document.getElementById('video_' + index);
    var playIcon = 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.5 16.5v-9l7 4.5-7 4.5z';
    var pauseIcon = 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z';

    if (myVideo.paused) {
      myVideo.play();
      document.getElementById(e.currentTarget.id).firstChild.lastChild.setAttribute('d', pauseIcon);
    } else {
      myVideo.pause();
      document.getElementById(e.currentTarget.id).firstChild.lastChild.setAttribute('d', playIcon);
    }
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "library"
  }, /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("h1", {
    className: "library-title"
  }, "Rehab Library"), /*#__PURE__*/React.createElement("div", {
    className: "library-content"
  }, /*#__PURE__*/React.createElement(Space, {
    direction: "vertical",
    size: 20
  }, /*#__PURE__*/React.createElement(Row, {
    className: "library-top"
  }, /*#__PURE__*/React.createElement(Col, {
    span: 8
  }, /*#__PURE__*/React.createElement(Search, {
    className: "search-videos",
    placeholder: "Search an exercise",
    onSearch: onSearch,
    enterButton: true
  })), /*#__PURE__*/React.createElement(Col, {
    span: 16
  }, /*#__PURE__*/React.createElement(Space, {
    direction: "horizontal",
    size: 20,
    align: "center",
    className: "library-actions"
  }, /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    shape: "round",
    size: "large",
    onClick: function onClick() {
      showModal('general');
    }
  }, "Settings"), /*#__PURE__*/React.createElement(Select, {
    className: "filter-library",
    defaultValue: "all-libraries",
    style: {
      width: 150
    },
    onChange: props.onFilterLibrary
  }, /*#__PURE__*/React.createElement(Option, {
    value: "all"
  }, "All libraries"), /*#__PURE__*/React.createElement(Option, {
    value: "default"
  }, "Rehab library"), /*#__PURE__*/React.createElement(Option, {
    value: "personal"
  }, "My library"))))), /*#__PURE__*/React.createElement(Row, {
    gutter: [16, 8]
  }, (libraryVideos === null || libraryVideos === void 0 ? void 0 : libraryVideos.docs.length) == 0 && /*#__PURE__*/React.createElement(EmptyData, null), libraryVideos === null || libraryVideos === void 0 ? void 0 : libraryVideos.docs.map(function (singleVideo, index) {
    var showSettingButton = objectToSave.videos.find(function (video) {
      return singleVideo._id === video.rehabLibraryId;
    });
    return /*#__PURE__*/React.createElement(Col, {
      span: 8,
      key: index
    }, /*#__PURE__*/React.createElement("div", {
      className: "exercise-video-content"
    }, /*#__PURE__*/React.createElement("video", {
      id: 'video_' + index,
      audio: "false",
      className: "exercise-video",
      loop: true,
      muted: true,
      preload: "metadata",
      src: singleVideo.videoUrl,
      type: "video/mp4"
    }), /*#__PURE__*/React.createElement(Button, {
      id: 'btn_' + index,
      className: "toogle-play-pause-video",
      type: "link",
      icon: /*#__PURE__*/React.createElement(MdPlayCircle, {
        size: "50px"
      }),
      onClick: function onClick(e) {
        return tooglePlayPauseVideo(e, index);
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: "video-footer"
    }, /*#__PURE__*/React.createElement("h3", null, singleVideo.title), /*#__PURE__*/React.createElement(Checkbox, {
      className: "check-exercise",
      onChange: function onChange(e) {
        onChanceCheckbox(e, singleVideo._id);
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: "video-actions"
    }, /*#__PURE__*/React.createElement(Space, {
      style: {
        width: '100%'
      }
    }, showSettingButton && /*#__PURE__*/React.createElement(Button, {
      type: "link",
      shape: "circle",
      icon: /*#__PURE__*/React.createElement(FaCog, {
        size: "22px"
      }),
      onClick: function onClick() {
        showModal('single', singleVideo._id);
      }
    }), /*#__PURE__*/React.createElement(Popconfirm, {
      title: "Are you sure to delete this exercise?",
      onConfirm: function onConfirm() {
        confirm(singleVideo._id);
      } // onCancel={cancel}
      ,
      okText: "Yes",
      cancelText: "No"
    }, /*#__PURE__*/React.createElement(Button, {
      type: "link",
      shape: "circle",
      icon: /*#__PURE__*/React.createElement(IoMdTrash, {
        size: "22px"
      })
    }))))));
  })), /*#__PURE__*/React.createElement(Row, {
    justify: "end",
    className: "library-footer"
  }, /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(Space, {
    direction: "horizontal",
    size: 20
  }, /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    shape: "round",
    size: "large",
    onClick: function onClick() {
      showModal('new');
    }
  }, "Record New Exercise"), /*#__PURE__*/React.createElement(Button // type='primary'
  , {
    shape: "round",
    size: "large",
    className: "btn-solid-green",
    onClick: onClickSend
  }, "Send"))))))), /*#__PURE__*/React.createElement(ModalComponent, {
    isModalVisible: isModalVisible,
    handleOk: handleOk,
    handleCancel: handleCancel,
    contentType: contentType
  }));
};

export default Library;