import React, { useState } from 'react';
import { ModalTabs } from '../../containers/navbar/tabs/Tabs';
import { CustomCheckBox } from '../common/inputs/Checkbox';
import { RegularInput } from '../common/inputs/TextInput';
import { LabelIcon } from '../common/texts/TextIcon';
import DatePicker from 'react-date-picker';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
import { connect } from 'react-redux';
import {
  addFormDueDate,
  allowValidation,
  setNotification,
  setTotalResponse,
  setAgentResponse,
  updateDispatchName,
  shareForm,
  onAllowMultiResponse,
  getSharedLinks,
} from '../../redux/action-creators/form-actions/forms.actions';
import { NofillButton, PrimaryButton } from '../common/buttons/PrimaryBtn';
import { useParams, withRouter } from 'react-router-dom';
import { useToasts } from 'react-toast-notifications';
const sliderMarks = {
  100: 100,
  500: 500,
  1500: 1500,
  3000: '3000+',
};

const FormSettingsModal = props => {
  const {
    addFormDueDate,
    validation,
    setNotification,
    setTotalResponse,
    setAgentResponse,
    allowValidation,
    notification,
    totalExpectedResponses,
    responsePerAgent,
    updateDispatchName,
    dispatchName,
    setShareModal,
    onAllowMultiResponse,
    allowMultipleResponses,
    shareForm,
    getSharedLinks,
    shareLinkId,
  } = props;
  const [activeTab, setActiveTAb] = useState('general');
  const [startDate, setStartDate] = useState(new Date());
  const [sharing, setSharing] = useState(false);
  const { addToast } = useToasts();
  const { id } = useParams();

  const onDateChange = value => {
    setStartDate(value);
    addFormDueDate(value.toISOString());
  };

  const onShareForm = async () => {
    setSharing(true);
    const shareDetails = {
      name: dispatchName,
      form: id,
    };

    if (validation.length > 0) {
      shareDetails.allowValidation = validation;
    }

    if (addFormDueDate.length > 0) {
      shareDetails.allowValidation = validation;
    }

    if (JSON.stringify(allowMultipleResponses.length) > 0) {
      shareDetails.allowMultipleResponses = allowMultipleResponses;
    }

    if (notification.length > 0) {
      shareDetails.notificationFrequency = notification;
    }

    if (totalExpectedResponses > 0) {
      shareDetails.totalExpectedResponses = totalExpectedResponses;
    }

    if (responsePerAgent > 0) {
      shareDetails.responsesPerAgent = responsePerAgent;
    }

    const shareData = await shareForm(shareDetails);

    if (shareData?.success) {
      setShareModal(false);

      if (props.history.location.pathname.includes('share')) {
        if (shareLinkId) {
          getSharedLinks(shareLinkId);
        }
      } else {
        props.history.push(`/share/${id}`);
      }
    } else {
      addToast(shareData?.error, {
        appearance: 'error',
      });
    }

    setSharing(false);
  };

  return /*#__PURE__*/ React.createElement(
    'div',
    null,
    /*#__PURE__*/ React.createElement(ModalTabs, {
      active: activeTab,
      setActiveTab: setActiveTAb,
    }),
    activeTab === 'general' &&
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'modal-body py-3',
        },
        /*#__PURE__*/ React.createElement(LabelIcon, {
          title: 'Set a name for this form share',
          svg: 'info',
        }),
        /*#__PURE__*/ React.createElement(RegularInput, {
          value: dispatchName,
          onchange: value => updateDispatchName(value),
        }),
        /*#__PURE__*/ React.createElement(LabelIcon, {
          title: 'Set a date to stop collecting responses',
          svg: 'info',
        }),
        /*#__PURE__*/ React.createElement(DatePicker, {
          onChange: date => onDateChange(date),
          value: startDate,
        }),
        /*#__PURE__*/ React.createElement(
          'div',
          null,
          /*#__PURE__*/ React.createElement(LabelIcon, {
            title: 'Allow Validation of Responses',
            svg: 'info',
          }),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'flex-width-1-2',
            },
            /*#__PURE__*/ React.createElement(CustomCheckBox, {
              onClick: () => allowValidation(true),
              type: 'radio',
              label: 'yes',
              name: 'allow-validation',
            }),
            /*#__PURE__*/ React.createElement(CustomCheckBox, {
              onClick: () => allowValidation(false),
              type: 'radio',
              label: 'no',
              name: 'allow-validation',
            })
          )
        )
      ),
    activeTab === 'notification' &&
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'modal-body py-3',
        },
        /*#__PURE__*/ React.createElement(
          'div',
          null,
          /*#__PURE__*/ React.createElement(LabelIcon, {
            title: 'Notify me for progress on responses',
            svg: 'info',
          }),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'flex-width-1-2',
            },
            /*#__PURE__*/ React.createElement(CustomCheckBox, {
              onClick: () => setNotification('always'),
              type: 'radio',
              label: 'Always',
              name: 'notification',
            }),
            /*#__PURE__*/ React.createElement(CustomCheckBox, {
              onClick: () => setNotification('daily'),
              type: 'radio',
              label: 'daily',
              name: 'notification',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'flex-width-1-2',
            },
            /*#__PURE__*/ React.createElement(CustomCheckBox, {
              onClick: () => setNotification('monthly'),
              type: 'radio',
              label: 'Monthly',
              name: 'notification',
            }),
            /*#__PURE__*/ React.createElement(CustomCheckBox, {
              type: 'radio',
              onClick: () => setNotification('yearly'),
              label: 'Yearly',
              name: 'notification',
            })
          )
        )
      ),
    activeTab === 'responses' &&
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'modal-body py-3',
        },
        /*#__PURE__*/ React.createElement(LabelIcon, {
          title: 'Set the total number of response that you want to collect',
          svg: 'info',
        }),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'd-flx',
          },
          /*#__PURE__*/ React.createElement(
            'span',
            {
              style: {
                maxWidth: '10rem',
                marginRight: '2rem',
              },
            },
            /*#__PURE__*/ React.createElement(RegularInput, {
              value: totalExpectedResponses,
              onchange: value => setTotalResponse(value),
            })
          ),
          /*#__PURE__*/ React.createElement(Slider, {
            style: {
              paddingTop: '1rem',
            },
            min: 1,
            value: totalExpectedResponses,
            onChange: value => setTotalResponse(value),
            max: 3000,
            marks: sliderMarks,
          })
        ),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            style: {
              marginTop: '5rem',
            },
          },
          /*#__PURE__*/ React.createElement(LabelIcon, {
            title:
              'Set the total number of response you want want each agent  to collect',
            svg: 'info',
          }),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx',
            },
            /*#__PURE__*/ React.createElement(
              'span',
              {
                style: {
                  maxWidth: '10rem',
                  marginRight: '2rem',
                },
              },
              /*#__PURE__*/ React.createElement(RegularInput, {
                value: responsePerAgent,
                onchange: value => setAgentResponse(value),
              })
            ),
            /*#__PURE__*/ React.createElement(Slider, {
              style: {
                paddingTop: '1rem',
              },
              min: 1,
              value: responsePerAgent,
              onChange: value => setAgentResponse(value),
              max: 3000,
              marks: sliderMarks,
            })
          )
        ),
        /*#__PURE__*/ React.createElement(LabelIcon, {
          title: 'Allow multiple responses',
          svg: 'info',
        }),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'flex-width-1-2',
          },
          /*#__PURE__*/ React.createElement(CustomCheckBox, {
            onClick: () => onAllowMultiResponse(true),
            type: 'radio',
            label: 'yes',
            name: 'responses',
          }),
          /*#__PURE__*/ React.createElement(CustomCheckBox, {
            type: 'radio',
            onClick: () => onAllowMultiResponse(false),
            label: 'no',
            name: 'responses',
          })
        )
      ),
    /*#__PURE__*/ React.createElement(
      'div',
      {
        className: 'd-flx-alc-jfe modal-action-wrap alt-modal-footer',
      },
      /*#__PURE__*/ React.createElement(NofillButton, {
        title: 'Skip',
        onclick: () => setShareModal(false),
      }),
      /*#__PURE__*/ React.createElement(
        'span',
        {
          onClick: () => onShareForm(),
        },
        /*#__PURE__*/ React.createElement(PrimaryButton, {
          text: sharing ? ' Loading...' : 'Save Settings',
        })
      )
    )
  );
};

const mapStateToProps = state => ({
  allForms: state.forms.allForms,
  formId: state.forms.formId,
  formDueDate: state.forms.formDueDate,
  dispatchName: state.forms.dispatchName,
  validation: state.forms.validation,
  notification: state.forms.notification,
  totalExpectedResponses: state.forms.totalExpectedResponses,
  responsePerAgent: state.forms.responsePerAgent,
  allowMultipleResponses: state.forms.allowMultipleResponses,
});

export default withRouter(
  connect(mapStateToProps, {
    addFormDueDate,
    allowValidation,
    setNotification,
    setTotalResponse,
    setAgentResponse,
    updateDispatchName,
    onAllowMultiResponse,
    shareForm,
    getSharedLinks,
  })(FormSettingsModal)
);
