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, useEffect, useCallback, useMemo } from 'react';
import "./style.css";
import RangeSlider from "../../components/SliderRange";
import Select from 'react-select';
import Checkbox from "../../components/Checkbox";
import SubmitButton from "../../components/Button";
import { useSelector, useDispatch } from 'react-redux';
import { goToWeeklyAssessment, goToAssessment } from "../../store/rom/main";
import { getLastPreAssessments } from "../../store/rom/preAssessments";
import { updatePainScale, updateBodyPointsPainLevel, getWeeklyAssessmentsOptions, saveWeeklyAssessments } from "../../store/rom/weeklyAssessments";
import { MdClose } from 'react-icons/md';
var colors = {
  primary25: '#f0e8ff',
  primary50: '#f0e8ff',
  primary: '#673ab7',
  neutral50: '#7b7b7b',
  neutral60: '#7b7b7b',
  neutral70: '#7b7b7b',
  neutral80: '#7b7b7b',
  neutral90: '#7b7b7b'
};

var WeeklyAssessment = function WeeklyAssessment(props) {
  var dispatch = useDispatch();

  var _useState = useState(false),
      newPain = _useState[0],
      setNewPain = _useState[1];

  var _useSelector = useSelector(function (state) {
    return {
      identifier: state.rom.main.identifier,
      user: state.rom.main.user,
      lastSession: state.rom.main.lastSession,
      exercisesFrequency: state.rom.weeklyAssessments.exercisesFrequency,
      exercisesEffort: state.rom.weeklyAssessments.exercisesEffort,
      painScale: state.rom.weeklyAssessments.painScale,
      bodyPointsFromLastSession: state.rom.preAssessments.bodyPointsFromLastSession
    };
  }),
      identifier = _useSelector.identifier,
      user = _useSelector.user,
      lastSession = _useSelector.lastSession,
      exercisesFrequency = _useSelector.exercisesFrequency,
      exercisesEffort = _useSelector.exercisesEffort,
      painScale = _useSelector.painScale,
      bodyPointsFromLastSession = _useSelector.bodyPointsFromLastSession;

  console.log('bodyPointsFromLastSession::::', bodyPointsFromLastSession), useEffect(function () {
    dispatch(getLastPreAssessments({
      identifier: identifier,
      session: lastSession === null || lastSession === void 0 ? void 0 : lastSession.id
    }));
    dispatch(getWeeklyAssessmentsOptions());
  }, []);

  var closeWeeklyAssessment = function closeWeeklyAssessment(e) {
    e.stopPropagation();
    dispatch(goToWeeklyAssessment({
      isOpened: false
    }));
  };

  var onPreAssessment = function onPreAssessment() {
    dispatch(goToAssessment());
  };

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

  var handleChangePainLevel = function handleChangePainLevel(bodyPoint, value) {
    dispatch(updateBodyPointsPainLevel({
      bodyPoint: bodyPoint,
      value: value
    }));
  };

  var sendForm = function sendForm(e) {
    e.preventDefault(); // PASSAR o POINT ID

    dispatch(saveWeeklyAssessments(_extends({
      identifier: identifier,
      user: user
    }, painScale)));
    closeWeeklyAssessment(e);
  };

  var exerciseFrequencyValue = exercisesFrequency.find(function (val) {
    return val._id === painScale.exerciseFrequency;
  }) || null;

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

  var exerciseEffortValue = exercisesEffort.find(function (val) {
    return val._id === painScale.exerciseEffort;
  }) || null;

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

  return /*#__PURE__*/React.createElement("div", {
    className: "weekly-assessment"
  }, /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    className: "weekly-assessment-title"
  }, "Weekly Assessment"), /*#__PURE__*/React.createElement("div", {
    className: "pre-assessment-content"
  }, /*#__PURE__*/React.createElement("form", {
    onSubmit: sendForm,
    className: "form"
  }, /*#__PURE__*/React.createElement("h1", {
    className: "weekly-assessment-subtitle"
  }, "Do you have any new pain areas to report ", /*#__PURE__*/React.createElement("br", null), "(besides what is listed below)?"), /*#__PURE__*/React.createElement("span", {
    className: "checkbox-label-no"
  }, "No"), /*#__PURE__*/React.createElement(Checkbox, {
    className: "new-pain",
    newPain: true,
    onChange: function onChange(e) {
      return setNewPain(!newPain);
    },
    value: newPain
  }), /*#__PURE__*/React.createElement("span", {
    className: "checkbox-label-yes"
  }, "Yes"), newPain && /*#__PURE__*/React.createElement("div", {
    className: "message-box"
  }, /*#__PURE__*/React.createElement("p", null, "Please record this in the Pain Assessment before continuing."), /*#__PURE__*/React.createElement("button", {
    className: "btn-solid-purpple",
    onClick: onPreAssessment
  }, "CONTINUE"), /*#__PURE__*/React.createElement("button", {
    className: "btn-solid-green"
  }, "Skip")), /*#__PURE__*/React.createElement("h1", {
    className: "weekly-assessment-subtitle"
  }, "What is your current level of pain?"), bodyPointsFromLastSession.map(function (point, index) {
    var pain = painScale.painLevel.find(function (data) {
      return data.bodyPoint === point.bodyPoint._id;
    });
    return /*#__PURE__*/React.createElement(RangeSlider, {
      key: point._id + "-" + index,
      onChange: function onChange(e) {
        e.preventDefault();
        handleChangePainLevel(point.bodyPoint._id, e.target.value);
      },
      value: (pain === null || pain === void 0 ? void 0 : pain.value) || point.painLevel,
      min: 0,
      max: 10,
      step: 1,
      label: point.bodyPoint.name,
      level1: "Minimal",
      level2: "Moderate",
      level3: "Extreme",
      className: "range-slider"
    });
  }), /*#__PURE__*/React.createElement("h1", {
    className: "weekly-assessment-subtitle"
  }, "How are your symptoms this week?"), /*#__PURE__*/React.createElement(RangeSlider, {
    onChange: handleChange,
    value: painScale.symptoms,
    name: "symptoms",
    min: -5,
    max: 5,
    step: 1,
    level1: "Worse",
    level2: "No change",
    level3: "Better",
    className: "range-slider",
    hideLabel: false
  }), /*#__PURE__*/React.createElement("h1", {
    className: "weekly-assessment-subtitle"
  }, "How often are you following your recommended rehab exercises?"), /*#__PURE__*/React.createElement(Select, {
    onChange: handleChange,
    value: exerciseFrequencyValue,
    name: "exerciseFrequency",
    options: exercisesFrequency.map(function (val) {
      return {
        value: val._id,
        label: val.name
      };
    }),
    theme: function theme(_theme) {
      return _extends({}, _theme, {
        colors: _extends({}, _theme.colors, colors)
      });
    }
  }), painScale.exerciseFrequency !== 'havent-started' && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    className: "weekly-assessment-subtitle"
  }, "What is the effort to complete your rehab exercises?"), /*#__PURE__*/React.createElement(Select, {
    onChange: handleChange,
    value: exerciseEffortValue,
    name: "exerciseEffort",
    options: exercisesEffort.map(function (val) {
      return {
        value: val._id,
        label: val.name
      };
    }),
    theme: function theme(_theme2) {
      return _extends({}, _theme2, {
        colors: _extends({}, _theme2.colors, colors)
      });
    }
  })), /*#__PURE__*/React.createElement("h1", {
    className: "weekly-assessment-subtitle"
  }, "Any serious health concerns we should be aware of?"), /*#__PURE__*/React.createElement("span", {
    className: "checkbox-label-no"
  }, "No"), /*#__PURE__*/React.createElement(Checkbox, {
    name: "healthConcerns",
    onChange: handleChange,
    value: painScale.healthConcerns
  }), /*#__PURE__*/React.createElement("span", {
    className: "checkbox-label-yes"
  }, "Yes"), /*#__PURE__*/React.createElement("h1", {
    className: "weekly-assessment-warning"
  }, "If you\u2019re experiencing a health emergency contact 911 immediately."), /*#__PURE__*/React.createElement(SubmitButton, {
    text: "Save",
    type: "submit"
  })), /*#__PURE__*/React.createElement("button", {
    className: "btn-outline btn-close",
    onClick: closeWeeklyAssessment
  }, /*#__PURE__*/React.createElement(MdClose, {
    size: "30px"
  }))))));
};

export default WeeklyAssessment;