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 (
    <div>
      {/* <FormBuilderPageNav
        formUsers={formUsers}
        formId={formId}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
        categoryOptions={categoryOptions}
        allFolders={allFolders}
        bg="#ffffff"
        opt="div"
        createTemplate={createTemplate}
        deco="1px solid #E8EDFF"
      /> */}
      <FormBuilderLayout>
        <FormBuilderControls scrollToBottom={scrollToBottom} />
        <FormBuilderMain>
          <FormPageTabs activePage={activePage} formData={formData} />
          <FormBuilderContent>
            {!loadingForm ? (
              <ActiveView />
            ) : (
              <div style={{ marginTop: '5rem' }} className="d-flx-jsb">
                <PageLoader />
              </div>
            )}
            {activeView.length < 1 && !loadingForm ? <FormEmptyState /> : ''}
            <div style={{ marginTop: '80px' }}>
              <div ref={bottom}></div>
            </div>
          </FormBuilderContent>
        </FormBuilderMain>
      </FormBuilderLayout>
    </div>
  );
};

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