import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, Row, Col, InputNumber, Button } from 'antd';
import { updateGeneralSettings, updateSingleSettings, updateNewExercise, nextSequence } from "../../store/rehab/main";
import { useDispatch, useSelector } from 'react-redux';
var TextArea = Input.TextArea;
var errorMessage = 'Fill the required fields';
var titleDefault = 'Record new exercise';
var formValuesDefault = {
  title: '',
  description: '',
  repetitions: null,
  setsPerSessions: null,
  setsPerDay: null,
  frequencyPerWeek: null
};

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

  var _Form$useForm = Form.useForm(),
      form = _Form$useForm[0];

  var contentType = props.contentType;

  var _useSelector = useSelector(function (state) {
    return state.rehab.main;
  }),
      objectToSave = _useSelector.objectToSave,
      physioterapist = _useSelector.physioterapist,
      sequence = _useSelector.sequence,
      selectedVideoId = _useSelector.selectedVideoId;

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

  var _useState2 = useState(titleDefault),
      title = _useState2[0],
      setTitle = _useState2[1];

  useEffect(function () {
    if (contentType === 'general') {
      setTitle('Edit exercise details');
      form.setFieldsValue(objectToSave.settings);
    }

    if (contentType === 'single') {
      setTitle('Edit exercise details');
      var videoData = objectToSave.videos.find(function (video) {
        return video.rehabLibraryId === selectedVideoId;
      });
      form.setFieldsValue(videoData);
    }

    if (contentType === 'new') {
      setTitle('Record new exercise to library');
      form.setFieldsValue(formValuesDefault);
    }

    return function () {
      setTitle(titleDefault);
      form.setFieldsValue(formValuesDefault);
    };
  }, [form, contentType, props.isModalVisible]);

  var onFinish = function onFinish(data) {
    props.handleOk();
    setError(false);

    if (contentType === 'general') {
      var objectData = {
        description: data === null || data === void 0 ? void 0 : data.description,
        repetitions: data === null || data === void 0 ? void 0 : data.repetitions,
        setsPerSessions: data === null || data === void 0 ? void 0 : data.setsPerSessions,
        setsPerDay: data === null || data === void 0 ? void 0 : data.setsPerDay,
        frequencyPerWeek: data === null || data === void 0 ? void 0 : data.frequencyPerWeek,
        startDate: data === null || data === void 0 ? void 0 : data.exerciseDate[0].format('YYYY-MM-DD HH:mm:ss'),
        finalDate: data === null || data === void 0 ? void 0 : data.exerciseDate[1].format('YYYY-MM-DD HH:mm:ss')
      };
      dispatch(updateGeneralSettings(objectData));
    }

    if (contentType === 'single') {
      var _objectData = {
        rehabLibraryId: selectedVideoId,
        description: data === null || data === void 0 ? void 0 : data.description,
        repetitions: data === null || data === void 0 ? void 0 : data.repetitions,
        setsPerSessions: data === null || data === void 0 ? void 0 : data.setsPerSessions,
        setsPerDay: data === null || data === void 0 ? void 0 : data.setsPerDay,
        frequencyPerWeek: data === null || data === void 0 ? void 0 : data.frequencyPerWeek
      };
      dispatch(updateSingleSettings(_objectData));
    }

    if (contentType === 'new') {
      var _objectData2 = {
        physioterapist: physioterapist,
        title: data.title,
        description: data === null || data === void 0 ? void 0 : data.description,
        repetitions: data === null || data === void 0 ? void 0 : data.repetitions,
        setsPerSessions: data === null || data === void 0 ? void 0 : data.setsPerSessions,
        setsPerDay: data === null || data === void 0 ? void 0 : data.setsPerDay,
        frequencyPerWeek: data === null || data === void 0 ? void 0 : data.frequencyPerWeek,
        visible: true
      };
      dispatch(updateNewExercise(_objectData2));
      dispatch(nextSequence(sequence.next));
    }
  };

  var onFinishFailed = function onFinishFailed(errorInfo) {
    console.error('Failed:', errorInfo);
    setError(true);
  };

  var onValuesChange = function onValuesChange() {
    setError(false);
  };

  return /*#__PURE__*/React.createElement(Modal, {
    title: title,
    destroyOnClose: true,
    visible: props.isModalExerciseDetailsVisible,
    closable: false,
    onCancel: props.handleCancel,
    maskClosable: true,
    footer: null
  }, /*#__PURE__*/React.createElement("div", {
    className: "record-form-content"
  }, /*#__PURE__*/React.createElement(Form, {
    form: form,
    labelWrap: true,
    layout: "vertical",
    onFinish: onFinish,
    size: "large",
    onFinishFailed: onFinishFailed,
    onValuesChange: onValuesChange // initialValues={formValues}

  }, contentType === 'new' && /*#__PURE__*/React.createElement(Form.Item, {
    name: "title",
    rules: [{
      required: contentType === 'new' ? true : false,
      message: ''
    }]
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: "Add rehab exercise title",
    name: 'title'
  })), /*#__PURE__*/React.createElement(Form.Item, {
    name: "description"
  }, /*#__PURE__*/React.createElement(TextArea, {
    name: "description",
    rows: 4,
    placeholder: "Description"
  })), /*#__PURE__*/React.createElement(Row, {
    gutter: [16]
  }, /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "repetitions",
    rules: [{
      required: true,
      message: ''
    }]
  }, /*#__PURE__*/React.createElement(InputNumber, {
    min: 0,
    style: {
      width: '100%'
    },
    placeholder: "Repetitions",
    name: "repetitions"
  }))), /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "setsPerSessions",
    rules: [{
      required: true,
      message: ''
    }]
  }, /*#__PURE__*/React.createElement(InputNumber, {
    min: 0,
    style: {
      width: '100%'
    },
    placeholder: "Sets per session",
    name: "setsPerSessions"
  }))), /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "setsPerDay",
    rules: [{
      required: true,
      message: ''
    }]
  }, /*#__PURE__*/React.createElement(InputNumber, {
    min: 0,
    style: {
      width: '100%'
    },
    placeholder: "Sets per day",
    name: "setsPerDay"
  }))), /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "frequencyPerWeek",
    rules: [{
      required: true,
      message: ''
    }]
  }, /*#__PURE__*/React.createElement(InputNumber, {
    min: 0,
    placeholder: "Sessions per week",
    style: {
      width: '100%'
    },
    name: "frequencyPerWeek"
  })))), /*#__PURE__*/React.createElement(Form.Item, {
    className: "save-form-item"
  }, /*#__PURE__*/React.createElement(Button, {
    size: "large",
    htmlType: "submit",
    block: true
  }, "SAVE")), error && /*#__PURE__*/React.createElement("div", {
    className: "error-message"
  }, errorMessage))));
};

export default ModalExerciseDetails;