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 Select from 'react-select';
import { MdClose } from 'react-icons/md';
import { useSelector, useDispatch } from 'react-redux';
import TextArea from "../../components/TextArea";
import RangeSlider from "../../components/SliderRange";
import Button from "../../components/Button";
import { goToAssessment } from "../../store/rom/main";
import { getPreAssessmentsOptions, getPreAssessments, selectBodyPoint, savePreAssessments, updatePainScale, deletePreAssessments, resetPreAssessment } from "../../store/rom/preAssessments";
import "./style.css";
import ImgFront from "../../assets/front.svg";
import ImgBack from "../../assets/back.svg";
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 = useDispatch();

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

  var _useSelector = 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(updatePainScale({
      name: name,
      value: value
    }));
  };

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

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

  var onCloseSelectBodyPoint = function onCloseSelectBodyPoint() {
    dispatch(selectBodyPoint());
  };

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

  var onBodyPoint = function onBodyPoint(bodyPoint) {
    setError(false);
    dispatch(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(savePreAssessments(_extends({
        identifier: identifier,
        user: user,
        session: session.id,
        bodyPoint: selectedBodyPoint._id
      }, painScale)), goToAssessment({
        isOpened: false
      }));
    }
  };

  var onDeletePreAssessments = function onDeletePreAssessments() {
    dispatch(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.createElement("div", {
      className: (selectedBodyPoint.position === 'front' ? 'left' : 'right') + " popup-questions"
    }, /*#__PURE__*/React.createElement("div", {
      className: "popup-header"
    }, /*#__PURE__*/React.createElement("h1", null, selectedBodyPoint.name)), /*#__PURE__*/React.createElement("div", {
      className: "popup-content"
    }, /*#__PURE__*/React.createElement("form", {
      onSubmit: sendForm,
      className: "form"
    }, /*#__PURE__*/React.createElement("div", {
      className: "form_control"
    }, /*#__PURE__*/React.createElement("label", null, "When did your pain start?"), /*#__PURE__*/React.createElement(Select, {
      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.createElement(TextArea, {
      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.createElement("div", {
      className: "form_control"
    }, /*#__PURE__*/React.createElement("label", null, "What is your frequency of pain?"), /*#__PURE__*/React.createElement(Select, {
      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.createElement(RangeSlider, {
      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.createElement(TextArea, {
      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.createElement(Button, {
      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.createElement(Button, {
      text: "delete",
      onClick: onDeletePreAssessments
    }), /*#__PURE__*/React.createElement("button", {
      className: "btn-close-popup",
      onClick: onCloseSelectBodyPoint
    }, /*#__PURE__*/React.createElement(MdClose, {
      size: "20px"
    })), error && /*#__PURE__*/React.createElement("div", {
      className: "error-message"
    }, errorMessage)));
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "pre-assessment"
  }, /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("h1", {
    className: "pre-assessment-title"
  }, "PAIN-ASSESSMENT"), /*#__PURE__*/React.createElement("h2", {
    className: "pre-assessment-subtitle"
  }, "Where is your pain located?"), /*#__PURE__*/React.createElement("div", {
    className: "body-shape-front"
  }, /*#__PURE__*/React.createElement("img", {
    src: ImgFront,
    width: 240
  }), bodyPoints.filter(function (val) {
    return val.position === 'front';
  }).map(function (hotspot, index) {
    return /*#__PURE__*/React.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.createElement("span", {
      className: "tooltiptext"
    }, hotspot === null || hotspot === void 0 ? void 0 : hotspot.name));
  })), /*#__PURE__*/React.createElement("div", {
    className: "body-shape-back"
  }, /*#__PURE__*/React.createElement("img", {
    src: ImgBack,
    width: 240
  }), bodyPoints.filter(function (val) {
    return val.position === 'back';
  }).map(function (hotspot, index) {
    return /*#__PURE__*/React.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.createElement("span", {
      className: "tooltiptext"
    }, hotspot.name));
  })), /*#__PURE__*/React.createElement("button", {
    className: "btn-outline btn-close",
    onClick: closePreAssessment
  }, /*#__PURE__*/React.createElement(MdClose, {
    size: "30px"
  })), selectedBodyPoint && PopupQuestions()));
};

export default memo(PreAssessment);