import React, { useState, useEffect, useRef } from 'react';
import { MdClose } from 'react-icons/md';
import { useDispatch, useSelector } from 'react-redux';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

import { InputNumber, Row, Col, DatePicker, Form, Button, Input } from 'antd';
import Buttom from "../../components/Button"; // import Input from '@components/Input';
// import TextArea from '@components/TextArea';

import { nextSequence, updateRecordConsult } from "../../store/rehab/main";
import "./style.css";
var TextArea = Input.TextArea;
var errorMessage = 'fill the required fields';
var RangePicker = DatePicker.RangePicker;

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

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

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

  var onFinish = function onFinish(values) {
    setError(false);
    console.log('Success:', values);
    var objectData = {
      title: values.title,
      description: values.description,
      repetitions: values.reps,
      setsPerSessions: values.setsSession,
      setsPerDay: values.setsDay,
      frequencyPerWeek: values.frequencyWeek,
      startDate: values === null || values === void 0 ? void 0 : values.exerciseDate[0].format('YYYY-MM-DD HH:mm:ss'),
      finalDate: values === null || values === void 0 ? void 0 : values.exerciseDate[1].format('YYYY-MM-DD HH:mm:ss')
    };
    dispatch(nextSequence(sequence.next.next));
    dispatch(updateRecordConsult(objectData));
  };

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

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

  return /*#__PURE__*/React.createElement("div", {
    className: "record-form"
  }, /*#__PURE__*/React.createElement("div", {
    className: "container"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
    className: "record-form-title"
  }, "Record Consult"), /*#__PURE__*/React.createElement("div", {
    className: "record-form-content"
  }, /*#__PURE__*/React.createElement(Form, {
    labelWrap: true,
    layout: "vertical",
    onFinish: onFinish,
    size: "large",
    onValuesChange: onValuesChange,
    onFinishFailed: onFinishFailed
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "title",
    rules: [{
      required: true,
      message: ''
    }]
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: "Add rehab exercise title"
  })), /*#__PURE__*/React.createElement(Form.Item, {
    name: "description"
  }, /*#__PURE__*/React.createElement(TextArea, {
    rows: 4,
    placeholder: "Description"
  })), /*#__PURE__*/React.createElement(Row, {
    gutter: [16]
  }, /*#__PURE__*/React.createElement(Col, {
    span: 8
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "reps",
    rules: [{
      required: true,
      message: ''
    }]
  }, /*#__PURE__*/React.createElement(InputNumber, {
    min: 0,
    style: {
      width: '100%'
    },
    placeholder: "Repetitions"
  }))), /*#__PURE__*/React.createElement(Col, {
    span: 8
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "setsSession",
    rules: [{
      required: true,
      message: ''
    }]
  }, /*#__PURE__*/React.createElement(InputNumber, {
    min: 0,
    style: {
      width: '100%'
    },
    placeholder: "Sets per session"
  }))), /*#__PURE__*/React.createElement(Col, {
    span: 8
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "setsDay",
    rules: [{
      required: true,
      message: ''
    }]
  }, /*#__PURE__*/React.createElement(InputNumber, {
    min: 0,
    style: {
      width: '100%'
    },
    placeholder: "Sets per day"
  }))), /*#__PURE__*/React.createElement(Col, {
    span: 8
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "frequencyWeek",
    rules: [{
      required: true,
      message: ''
    }]
  }, /*#__PURE__*/React.createElement(InputNumber, {
    min: 0,
    placeholder: "Sessions per week",
    style: {
      width: '100%'
    }
  }))), /*#__PURE__*/React.createElement(Col, {
    span: 16
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "exerciseDate",
    rules: [{
      required: true,
      message: ''
    }]
  }, /*#__PURE__*/React.createElement(RangePicker, {
    style: {
      width: '100%'
    },
    format: "YYYY-MM-DD"
  })))), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
    size: "large",
    htmlType: "submit",
    block: true
  }, "SAVE")), error && /*#__PURE__*/React.createElement("div", {
    className: "error-message"
  }, errorMessage))))));
};

export default RecordConsultForm;