import React, { useState, useRef } from 'react';
import { connect } from 'react-redux';
import {
  FormBuilderContent,
  FormBuilderLayout,
  FormBuilderMain,
} from '../../containers/form-containers/FormBuilderLayouts';
import {
  editFormDescription,
  editFormName,
  refillFormData,
} from '../../redux/action-creators/form-builder-actions/form-builder.actions';
import ActiveView from './ActiveView';
import FormBuilderControls from './form-builder-controls/FormBuilderControls';
import FormEmptyState from './FormEmptyState';
import FormPageTabs from './FormPageTabs';
import {
  addFormId,
  savingForm,
  createNewForm,
  updateForm,
  getFormUsers,
  duplicateForm,
  createTemplate,
  getTemplateCategories,
  getSharedLinks,
  getAllFolders,
  addFormToFolder,
} from '../../redux/action-creators/form-actions/forms.actions';
import PageLoader from '../../components/loaders/Page-loader';
import { getUserProfile } from '../../redux/action-creators/settings-actions/settings.actions';

const FormBuilder = props => {
  const { formData, activePage, activeView, coverImage } = props;
  const [loadingForm, setLoadingForm] = useState(false);
  const bottom = useRef();

  const scrollToBottom = () => {
    bottom.current.scrollIntoView({
      behavior: 'smooth',
    });
  };

  return /*#__PURE__*/ React.createElement(
    'div',
    null,
    /*#__PURE__*/ React.createElement(
      FormBuilderLayout,
      null,
      /*#__PURE__*/ React.createElement(FormBuilderControls, {
        scrollToBottom: scrollToBottom,
      }),
      /*#__PURE__*/ React.createElement(
        FormBuilderMain,
        null,
        /*#__PURE__*/ React.createElement(FormPageTabs, {
          activePage: activePage,
          formData: formData,
        }),
        /*#__PURE__*/ React.createElement(
          FormBuilderContent,
          null,
          !loadingForm
            ? /*#__PURE__*/ React.createElement(ActiveView, null)
            : /*#__PURE__*/ React.createElement(
                'div',
                {
                  style: {
                    marginTop: '5rem',
                  },
                  className: 'd-flx-jsb',
                },
                /*#__PURE__*/ React.createElement(PageLoader, null)
              ),
          activeView.length < 1 && !loadingForm
            ? /*#__PURE__*/ React.createElement(FormEmptyState, null)
            : '',
          /*#__PURE__*/ React.createElement(
            'div',
            {
              style: {
                marginTop: '80px',
              },
            },
            /*#__PURE__*/ React.createElement('div', {
              ref: bottom,
            })
          )
        )
      )
    )
  );
};

const mapStateToProps = state => ({
  formData: state.formBuilder.formData,
  formId: state.forms.formId,
  formName: state.formBuilder.name,
  activePage: state.formBuilder.activePage,
  activeView: state.formBuilder.activeView,
  description: state.formBuilder.description,
  formUsers: state.forms.formUsers,
  categoryOptions: state.forms.templateCategories,
  updatingForm: state.formBuilder.updatingForm,
  coverImage: state.forms.coverImage,
  activeFolder: state.forms.activeFolder,
  userProfile: state.settings.profile,
  allFolders: state.forms.allFolders,
});

export default connect(mapStateToProps, {
  editFormDescription,
  editFormName,
  addFormId,
  savingForm,
  createNewForm,
  refillFormData,
  updateForm,
  getFormUsers,
  duplicateForm,
  createTemplate,
  getTemplateCategories,
  getSharedLinks,
  getUserProfile,
  getAllFolders,
  addFormToFolder,
})(FormBuilder);
