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); }

import React, { useState, memo, useCallback, useEffect } from 'react';
import ReactCompareImage from 'react-compare-image';
import { MdClose } from 'react-icons/md';
import { Container, Row } from 'react-grid-system';
import SimpleReactLightbox, { SRLWrapper } from 'simple-react-lightbox';
import { useSelector, useDispatch } from 'react-redux';
import DataPicker from "../../components/DatePicker";
import Gallery from "../../components/Gallery";
import { goToGallery, getPhysicalAssessmentsMetrics, selectImagesToCompare, deleteAssessmentImage, startDateRange, endDateRange } from "../../store/rom/main";
import 'react-nice-dates/build/style.css';
import "./style.css";
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 = useDispatch();

  var _useSelector = 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 = useState(false),
      compareImage = _useState[0],
      setCompareImage = _useState[1];

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

  var onSelectImage = function onSelectImage(index) {
    dispatch(selectImagesToCompare(index));
  };

  var onDeleteImage = function onDeleteImage(id) {
    dispatch(deleteAssessmentImage(id));
  };

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

  var startDate = function startDate(date) {
    dispatch(startDateRange(date));
  };

  var endDate = function endDate(date) {
    dispatch(endDateRange(date));
  };

  useEffect(function () {
    dispatch(getPhysicalAssessmentsMetrics({
      user: user,
      identifier: identifier,
      rangeDate: _extends({}, gallery.rangeDate),
      exercise: currentExercise._id
    }));
  }, [dispatch, identifier, gallery.rangeDate, currentExercise._id, user]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "screen-gallery"
  }, /*#__PURE__*/React.createElement("div", {
    className: "screen-gallery-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "gallery-header"
  }, /*#__PURE__*/React.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.createElement(DataPicker, {
    gallery: gallery,
    startDate: startDate,
    endDate: endDate
  })), /*#__PURE__*/React.createElement("div", {
    className: "custom-gallery"
  }, gallery.images && gallery.images.length > 0 ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(SimpleReactLightbox, null, /*#__PURE__*/React.createElement(SRLWrapper, {
    options: optionsLightBox
  }, /*#__PURE__*/React.createElement(Row, {
    gutterWidth: 14
  }, /*#__PURE__*/React.createElement(Gallery, {
    galleryImages: gallery.images,
    onSelectImage: onSelectImage,
    onDeleteImage: onDeleteImage
  })))))) : /*#__PURE__*/React.createElement("div", {
    className: "empty-state"
  }, "No results found")), gallery.images && gallery.images.length > 0 && /*#__PURE__*/React.createElement("div", {
    className: "gallery-bottom"
  }, /*#__PURE__*/React.createElement("button", {
    disabled: gallery.imagesToCompare.length < 2,
    className: "btn-compare " + (gallery.imagesToCompare.length == 2 ? 'active' : ''),
    onClick: showCompare
  }, "COMPARE")))), compareImage && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "screen-gallery"
  }, /*#__PURE__*/React.createElement(ReactCompareImage, {
    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.createElement("button", {
    className: "btn-outline btn-close-compare",
    onClick: showCompare
  }, /*#__PURE__*/React.createElement(MdClose, {
    size: "30px"
  }))), /*#__PURE__*/React.createElement("button", {
    className: "btn-outline btn-close",
    onClick: closeGallery
  }, /*#__PURE__*/React.createElement(MdClose, {
    size: "30px"
  })));
};

export default memo(ScreenGallery);