import _regeneratorRuntime from "@babel/runtime/regenerator";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

import React, { useEffect, useState } from 'react';
import ModalExerciseDetails from "./ModalExerciseDetails";
import ErrorMessageComponent from "../../components/ErrorMessage";
import EmptyData from "../../components/EmptyData";
import { Row, Col, Input, Button, Select, Space, Checkbox, Popconfirm, Result } from 'antd';
var Search = Input.Search;
var Option = Select.Option;
import { IoMdTrash, FaCog, MdPlayCircle, RiVideoUploadFill } from 'react-icons/all';
import { LoadingOutlined } from '@ant-design/icons';
var antIcon = /*#__PURE__*/React.createElement(LoadingOutlined, {
  style: {
    fontSize: '50px',
    color: '#6b2ba0'
  },
  spin: true,
  twoToneColor: "#52c41a"
});
import "./style.css";
import { useDispatch, useSelector } from 'react-redux';
import { updateVideoOnObjectToSave, setSelectedVideoId, deleteVideoFromLibrary, savePhysioterapistVideoToPatient, initSequence, getVideoFromLibrary, cleanErrorMessage } from "../../store/rehab/main";
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';

var Library = function Library(props) {
  var _libraryVideos$docs, _libraryVideos$docs2, _objectToSave$videos;

  var dispatch = useDispatch();

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

  var _useState = useState(false),
      isModalExerciseDetailsVisible = _useState[0],
      setIsModalExerciseDetailsVisible = _useState[1]; // const [isModalConfirmeRangeDateVisible, setIsModalConfirmeRangeDateVisible] =
  //   useState(false);


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

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

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

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

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

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

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

  var onClickSend = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _yield$dispatch, payload;

      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              dispatch(cleanErrorMessage());
              _context.next = 3;
              return dispatch(savePhysioterapistVideoToPatient(objectToSave));

            case 3:
              _yield$dispatch = _context.sent;
              payload = _yield$dispatch.payload;

              if ((payload === null || payload === void 0 ? void 0 : payload.status) !== 400) {
                dispatch(initSequence());
              }

            case 6:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function onClickSend() {
      return _ref.apply(this, arguments);
    };
  }(); // const onFilterLibrary = (filter, object, page = 1) => {
  //   if (filter === 'default')
  //     return dispatch(
  //       getVideoFromLibrary(`${physioterapist}?page=${page}&default=true`)
  //     );
  //   if (filter === 'personal')
  //     return dispatch(
  //       getVideoFromLibrary(`${physioterapist}?page=${page}&default=false`)
  //     );
  //   return dispatch(getVideoFromLibrary(`${physioterapist}?page=${page}`));
  // };


  var onSearchExerciseFromLibrary = function onSearchExerciseFromLibrary(title, page) {
    if (page === void 0) {
      page = 1;
    }

    dispatch(getVideoFromLibrary(physioterapist + "?page=" + page + "&title=" + title));
  };

  var tooglePlayPauseVideo = function tooglePlayPauseVideo(e, index) {
    var myVideo = document.getElementById('video_' + index);
    myVideo.paused ? myVideo.play() : myVideo.pause();
    document.getElementById(e.currentTarget.id).firstChild.lastChild.setAttribute('d', myVideo.paused ? pauseIcon : playIcon);
  };

  useEffect(function () {
    if (physioterapist) dispatch(getVideoFromLibrary(physioterapist + "?page=1"));
  }, [physioterapist]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, errorMessage ? /*#__PURE__*/React.createElement(ErrorMessageComponent, {
    errorMessage: errorMessage
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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: onSearchExerciseFromLibrary,
    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(Row, {
    gutter: [16, 8]
  }, (libraryVideos === null || libraryVideos === void 0 ? void 0 : (_libraryVideos$docs = libraryVideos.docs) === null || _libraryVideos$docs === void 0 ? void 0 : _libraryVideos$docs.length) == 0 ? /*#__PURE__*/React.createElement(EmptyData, null) : libraryVideos === null || libraryVideos === void 0 ? void 0 : (_libraryVideos$docs2 = libraryVideos.docs) === null || _libraryVideos$docs2 === void 0 ? void 0 : _libraryVideos$docs2.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"
    }, (singleVideo === null || singleVideo === void 0 ? void 0 : singleVideo.processing) ? /*#__PURE__*/React.createElement(Result, {
      className: "result" // icon={<RiVideoUploadFill size="50px" />}
      ,
      icon: antIcon,
      title: "processing",
      style: {
        color: '#FFF'
      }
    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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? This will delete for all users assigned to this exercise!",
      onConfirm: function onConfirm() {
        confirm(singleVideo._id);
      },
      overlayStyle: {
        width: '300px'
      },
      okText: "Yes",
      cancelText: "No"
    }, /*#__PURE__*/React.createElement(Button, {
      type: "link",
      shape: "circle",
      icon: /*#__PURE__*/React.createElement(IoMdTrash, {
        size: "22px"
      })
    }))))));
  }))))), /*#__PURE__*/React.createElement(ModalExerciseDetails, {
    isModalExerciseDetailsVisible: isModalExerciseDetailsVisible,
    handleOk: handleOk,
    handleCancel: handleCancel,
    contentType: contentType
  })), /*#__PURE__*/React.createElement("div", {
    className: "library-footer"
  }, /*#__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,
    disabled: (users === null || users === void 0 ? void 0 : users.length) > 0 && (objectToSave === null || objectToSave === void 0 ? void 0 : (_objectToSave$videos = objectToSave.videos) === null || _objectToSave$videos === void 0 ? void 0 : _objectToSave$videos.length) > 0 ? false : true
  }, "Send"))));
};

export default Library;