"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactCompareImage = _interopRequireDefault(require("react-compare-image"));

var _md = require("react-icons/md");

var _reactGridSystem = require("react-grid-system");

var _simpleReactLightbox = _interopRequireWildcard(require("simple-react-lightbox"));

var _reactRedux = require("react-redux");

var _DatePicker = _interopRequireDefault(require("../../components/DatePicker"));

var _Gallery = _interopRequireDefault(require("../../components/Gallery"));

var _main = require("../../store/rom/main");

require("react-nice-dates/build/style.css");

require("./style.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var optionsLightBox = {
  buttons: {
    showAutoplayButton: false,
    showFullscreenButton: false,
    showThumbnailsButton: false
  },
  caption: {
    captionAlignment: 'start',
    captionColor: '#FFFFFF',
    captionContainerPadding: '20px 0 30px 0',
    captionFontFamily: 'inherit',
    captionFontSize: 'inherit',
    captionFontStyle: 'inherit',
    captionFontWeight: 'inherit',
    captionTextTransform: 'inherit',
    showCaption: true
  }
};

var ScreenGallery = function ScreenGallery() {
  var _currentExercise$labe;

  var dispatch = (0, _reactRedux.useDispatch)();

  var _useSelector = (0, _reactRedux.useSelector)(function (state) {
    return {
      gallery: state.rom.main.gallery,
      currentExercise: state.rom.main.currentExercise,
      identifier: state.rom.main.identifier,
      user: state.rom.main.user
    };
  }),
      gallery = _useSelector.gallery,
      currentExercise = _useSelector.currentExercise,
      identifier = _useSelector.identifier,
      user = _useSelector.user;

  var _useState = (0, _react.useState)(false),
      compareImage = _useState[0],
      setCompareImage = _useState[1];

  var showCompare = function showCompare() {
    return setCompareImage(!compareImage);
  };

  var onSelectImage = function onSelectImage(index) {
    dispatch((0, _main.selectImagesToCompare)(index));
  };

  var onDeleteImage = function onDeleteImage(id) {
    dispatch((0, _main.deleteAssessmentImage)(id));
  };

  var closeGallery = function closeGallery(e) {
    e.stopPropagation();
    dispatch((0, _main.goToGallery)({
      isOpened: false
    }));
  };

  var startDate = function startDate(date) {
    dispatch((0, _main.startDateRange)(date));
  };

  var endDate = function endDate(date) {
    dispatch((0, _main.endDateRange)(date));
  };

  (0, _react.useEffect)(function () {
    dispatch((0, _main.getPhysicalAssessmentsMetrics)({
      user: user,
      identifier: identifier,
      rangeDate: _extends({}, gallery.rangeDate),
      exercise: currentExercise._id
    }));
  }, [dispatch, identifier, gallery.rangeDate, currentExercise._id, user]);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "screen-gallery"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "screen-gallery-container"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "gallery-header"
  }, /*#__PURE__*/_react["default"].createElement("h1", null, currentExercise === null || currentExercise === void 0 ? void 0 : (_currentExercise$labe = currentExercise.label) === null || _currentExercise$labe === void 0 ? void 0 : _currentExercise$labe.toUpperCase()), /*#__PURE__*/_react["default"].createElement(_DatePicker["default"], {
    gallery: gallery,
    startDate: startDate,
    endDate: endDate
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "custom-gallery"
  }, gallery.images && gallery.images.length > 0 ? /*#__PURE__*/_react["default"].createElement(_reactGridSystem.Container, null, /*#__PURE__*/_react["default"].createElement(_reactGridSystem.Row, null, /*#__PURE__*/_react["default"].createElement(_simpleReactLightbox["default"], null, /*#__PURE__*/_react["default"].createElement(_simpleReactLightbox.SRLWrapper, {
    options: optionsLightBox
  }, /*#__PURE__*/_react["default"].createElement(_reactGridSystem.Row, {
    gutterWidth: 14
  }, /*#__PURE__*/_react["default"].createElement(_Gallery["default"], {
    galleryImages: gallery.images,
    onSelectImage: onSelectImage,
    onDeleteImage: onDeleteImage
  })))))) : /*#__PURE__*/_react["default"].createElement("div", {
    className: "empty-state"
  }, "No results found")), gallery.images && gallery.images.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
    className: "gallery-bottom"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    disabled: gallery.imagesToCompare.length < 2,
    className: "btn-compare " + (gallery.imagesToCompare.length == 2 ? 'active' : ''),
    onClick: showCompare
  }, "COMPARE")))), compareImage && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "screen-gallery"
  }, /*#__PURE__*/_react["default"].createElement(_reactCompareImage["default"], {
    className: "gallery-compare",
    leftImage: gallery.imagesToCompare[0].src,
    rightImage: gallery.imagesToCompare[1].src,
    leftImageLabel: gallery.imagesToCompare[0].date + ' - Result: ' + gallery.imagesToCompare[0].result + '°',
    rightImageLabel: gallery.imagesToCompare[1].date + ' - Result: ' + gallery.imagesToCompare[1].result + '°'
  })), /*#__PURE__*/_react["default"].createElement("button", {
    className: "btn-outline btn-close-compare",
    onClick: showCompare
  }, /*#__PURE__*/_react["default"].createElement(_md.MdClose, {
    size: "30px"
  }))), /*#__PURE__*/_react["default"].createElement("button", {
    className: "btn-outline btn-close",
    onClick: closeGallery
  }, /*#__PURE__*/_react["default"].createElement(_md.MdClose, {
    size: "30px"
  })));
};

var _default = (0, _react.memo)(ScreenGallery);

exports["default"] = _default;
module.exports = exports.default;