"use strict";

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

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

var _reactSelect = _interopRequireDefault(require("react-select"));

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

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

var _TextArea = _interopRequireDefault(require("../../components/TextArea"));

var _SliderRange = _interopRequireDefault(require("../../components/SliderRange"));

var _Button = _interopRequireDefault(require("../../components/Button"));

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

var _preAssessments = require("../../store/rom/preAssessments");

require("./style.css");

var _front = _interopRequireDefault(require("../../assets/front.svg"));

var _back = _interopRequireDefault(require("../../assets/back.svg"));

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 errorMessage = 'fill the required fields';
var colors = {
  primary25: '#f0e8ff',
  primary50: '#f0e8ff',
  primary: '#673ab7',
  neutral50: '#7b7b7b',
  neutral60: '#7b7b7b',
  neutral70: '#7b7b7b',
  neutral80: '#7b7b7b',
  neutral90: '#7b7b7b'
};

var PreAssessment = function PreAssessment(props) {
  var dispatch = (0, _reactRedux.useDispatch)();

  var _useState = (0, _react.useState)(false),
      error = _useState[0],
      setError = _useState[1];

  var _useSelector = (0, _reactRedux.useSelector)(function (state) {
    return {
      identifier: state.rom.main.identifier,
      session: state.rom.main.session,
      user: state.rom.main.user,
      finishedExercises: state.rom.main.finishedExercises,
      bodyPoints: state.rom.preAssessments.bodyPoints,
      painStart: state.rom.preAssessments.painStart,
      preAssesmentsSaved: state.rom.preAssessments.preAssesmentsSaved,
      painFrequency: state.rom.preAssessments.painFrequency,
      selectedBodyPoint: state.rom.preAssessments.selectedBodyPoint,
      painScale: state.rom.preAssessments.painScale,
      bodyPointsSaved: state.rom.preAssessments.bodyPointsSaved
    };
  }),
      identifier = _useSelector.identifier,
      session = _useSelector.session,
      user = _useSelector.user,
      finishedExercises = _useSelector.finishedExercises,
      bodyPoints = _useSelector.bodyPoints,
      painStart = _useSelector.painStart,
      preAssesmentsSaved = _useSelector.preAssesmentsSaved,
      painFrequency = _useSelector.painFrequency,
      selectedBodyPoint = _useSelector.selectedBodyPoint,
      painScale = _useSelector.painScale,
      bodyPointsSaved = _useSelector.bodyPointsSaved;

  var handleChange = function handleChange(e, action) {
    // action receive from SELECT
    var name = action ? action.name : e.target.name;
    var value = action ? e.value : e.target.value;
    dispatch((0, _preAssessments.updatePainScale)({
      name: name,
      value: value
    }));
  };

  (0, _react.useEffect)(function () {
    if (!(bodyPoints === null || bodyPoints === void 0 ? void 0 : bodyPoints.length) && !(painStart === null || painStart === void 0 ? void 0 : painStart.length) && !(painFrequency === null || painFrequency === void 0 ? void 0 : painFrequency.length)) {
      dispatch((0, _preAssessments.getPreAssessmentsOptions)());
    }

    return function () {
      setError(false);
      onCloseSelectBodyPoint();
    };
  }, [dispatch]);
  (0, _react.useEffect)(function () {
    if ((bodyPoints === null || bodyPoints === void 0 ? void 0 : bodyPoints.length) > 0) dispatch((0, _preAssessments.getPreAssessments)());
  }, [bodyPoints, selectedBodyPoint]);
  (0, _react.useEffect)(function () {
    if (finishedExercises.finished) dispatch((0, _preAssessments.resetPreAssessment)());
  }, [dispatch]);
  (0, _react.useEffect)(function () {
    dispatch((0, _preAssessments.selectBodyPoint)());
  }, [preAssesmentsSaved]);

  var onCloseSelectBodyPoint = function onCloseSelectBodyPoint() {
    dispatch((0, _preAssessments.selectBodyPoint)());
  };

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

  var onBodyPoint = function onBodyPoint(bodyPoint) {
    setError(false);
    dispatch((0, _preAssessments.selectBodyPoint)(bodyPoint));
  };

  var isValid = function isValid() {
    var isError = !painScale.whenPainStart || !painScale.painCause || !painScale.painFrequency || !painScale.relievePainLevel || painScale.painLevel === 0;
    setError(isError);
    return !isError;
  };

  var sendForm = function sendForm(e) {
    e.preventDefault();

    if (isValid()) {
      dispatch((0, _preAssessments.savePreAssessments)(_extends({
        identifier: identifier,
        user: user,
        session: session.id,
        bodyPoint: selectedBodyPoint._id
      }, painScale)), (0, _main.goToAssessment)({
        isOpened: false
      }));
    }
  };

  var onDeletePreAssessments = function onDeletePreAssessments() {
    dispatch((0, _preAssessments.deletePreAssessments)(selectedBodyPoint._id));
  };

  var PopupQuestions = function PopupQuestions() {
    var painStartValue = painStart.find(function (val) {
      return val._id === painScale.whenPainStart;
    }) || null;

    if (painStartValue) {
      var _painStartValue, _painStartValue2;

      painStartValue = {
        value: (_painStartValue = painStartValue) === null || _painStartValue === void 0 ? void 0 : _painStartValue._id,
        label: (_painStartValue2 = painStartValue) === null || _painStartValue2 === void 0 ? void 0 : _painStartValue2.name
      };
    }

    var frequencyOfPain = painFrequency.find(function (val) {
      return val._id === painScale.painFrequency;
    }) || null;

    if (frequencyOfPain) {
      frequencyOfPain = {
        value: frequencyOfPain._id,
        label: frequencyOfPain.name
      };
    }

    return /*#__PURE__*/_react["default"].createElement("div", {
      className: (selectedBodyPoint.position === 'front' ? 'left' : 'right') + " popup-questions"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "popup-header"
    }, /*#__PURE__*/_react["default"].createElement("h1", null, selectedBodyPoint.name)), /*#__PURE__*/_react["default"].createElement("div", {
      className: "popup-content"
    }, /*#__PURE__*/_react["default"].createElement("form", {
      onSubmit: sendForm,
      className: "form"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "form_control"
    }, /*#__PURE__*/_react["default"].createElement("label", null, "When did your pain start?"), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], {
      onChange: handleChange,
      value: painStartValue,
      name: "whenPainStart",
      options: painStart.map(function (val) {
        return {
          value: val._id,
          label: val.name
        };
      }),
      placeholder: "Select an option",
      className: error && !painScale.whenPainStart ? 'custom-select-opt invalid' : 'custom-select-opt',
      theme: function theme(_theme) {
        return _extends({}, _theme, {
          colors: _extends({}, _theme.colors, colors)
        });
      }
    })), /*#__PURE__*/_react["default"].createElement(_TextArea["default"], {
      onChange: handleChange,
      value: painScale.painCause,
      name: "painCause",
      className: error && !painScale.painCause ? 'textarea-input invalid' : 'textarea-input',
      label: "What caused your pain to initially occur?",
      placeholder: "describe",
      rows: 3,
      cols: 2
    }), /*#__PURE__*/_react["default"].createElement("div", {
      className: "form_control"
    }, /*#__PURE__*/_react["default"].createElement("label", null, "What is your frequency of pain?"), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], {
      onChange: handleChange,
      value: frequencyOfPain,
      name: "painFrequency",
      options: painFrequency.map(function (val) {
        return {
          value: val._id,
          label: val.name
        };
      }),
      className: error && !painScale.painFrequency ? 'custom-select-opt invalid' : 'custom-select-opt',
      theme: function theme(_theme2) {
        return _extends({}, _theme2, {
          colors: _extends({}, _theme2.colors, colors)
        });
      }
    })), /*#__PURE__*/_react["default"].createElement(_SliderRange["default"], {
      onChange: handleChange,
      value: painScale.painLevel,
      name: "painLevel",
      min: 0,
      max: 10,
      step: 1,
      label: 'Pain Level?',
      level1: "Minimal",
      level2: "Constant",
      level3: "Extreme",
      className: error && painScale.painLevel === 0 ? 'range-slider invalid' : 'range-slider'
    }), /*#__PURE__*/_react["default"].createElement(_TextArea["default"], {
      defaultValue: painScale.relievePainLevel,
      onChange: handleChange,
      value: painScale.relievePainLevel,
      name: "relievePainLevel",
      label: "How do you relieve your pain level?",
      placeholder: "describe",
      rows: 3,
      cols: 2,
      className: error && !painScale.relievePainLevel ? 'textarea-input invalid' : 'textarea-input'
    }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
      text: (painScale === null || painScale === void 0 ? void 0 : painScale._id) ? 'Update' : 'Save',
      type: "submit"
    })), (painScale === null || painScale === void 0 ? void 0 : painScale._id) && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
      text: "delete",
      onClick: onDeletePreAssessments
    }), /*#__PURE__*/_react["default"].createElement("button", {
      className: "btn-close-popup",
      onClick: onCloseSelectBodyPoint
    }, /*#__PURE__*/_react["default"].createElement(_md.MdClose, {
      size: "20px"
    })), error && /*#__PURE__*/_react["default"].createElement("div", {
      className: "error-message"
    }, errorMessage)));
  };

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "pre-assessment"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react["default"].createElement("h1", {
    className: "pre-assessment-title"
  }, "PAIN-ASSESSMENT"), /*#__PURE__*/_react["default"].createElement("h2", {
    className: "pre-assessment-subtitle"
  }, "Where is your pain located?"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "body-shape-front"
  }, /*#__PURE__*/_react["default"].createElement("img", {
    src: _front["default"],
    width: 240
  }), bodyPoints.filter(function (val) {
    return val.position === 'front';
  }).map(function (hotspot, index) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: index,
      style: hotspot.styles,
      className: (hotspot === null || hotspot === void 0 ? void 0 : hotspot._id) === (selectedBodyPoint === null || selectedBodyPoint === void 0 ? void 0 : selectedBodyPoint._id) ? 'hotspot-circle active' : bodyPointsSaved.find(function (bp) {
        var _bp$bodyPoint;

        return (bp === null || bp === void 0 ? void 0 : (_bp$bodyPoint = bp.bodyPoint) === null || _bp$bodyPoint === void 0 ? void 0 : _bp$bodyPoint._id) === (hotspot === null || hotspot === void 0 ? void 0 : hotspot._id);
      }) ? 'hotspot-circle saved' : 'hotspot-circle',
      onClick: function onClick(e) {
        e.preventDefault();
        onBodyPoint(hotspot);
      }
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "tooltiptext"
    }, hotspot === null || hotspot === void 0 ? void 0 : hotspot.name));
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "body-shape-back"
  }, /*#__PURE__*/_react["default"].createElement("img", {
    src: _back["default"],
    width: 240
  }), bodyPoints.filter(function (val) {
    return val.position === 'back';
  }).map(function (hotspot, index) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: index,
      style: hotspot.styles,
      className: hotspot._id === (selectedBodyPoint === null || selectedBodyPoint === void 0 ? void 0 : selectedBodyPoint._id) ? 'hotspot-circle active' : 'hotspot-circle',
      onClick: function onClick(e) {
        e.preventDefault();
        onBodyPoint(hotspot);
      }
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "tooltiptext"
    }, hotspot.name));
  })), /*#__PURE__*/_react["default"].createElement("button", {
    className: "btn-outline btn-close",
    onClick: closePreAssessment
  }, /*#__PURE__*/_react["default"].createElement(_md.MdClose, {
    size: "30px"
  })), selectedBodyPoint && PopupQuestions()));
};

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

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