function _extends() {
  _extends =
    Object.assign ||
    function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
  return _extends.apply(this, arguments);
}

import React, { useEffect, useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { connect } from 'react-redux';
import {
  editElementLabel,
  reoderCurrentView,
} from '../../redux/action-creators/form-builder-actions/form-builder.actions';
import Address from './Form-builder-elements/Address';
import Agreement from './Form-builder-elements/Agreement';
import AreaMap from './Form-builder-elements/AreaMap';
import DateElement from './Form-builder-elements/Date';
import DropDownElement from './Form-builder-elements/DropDownElement';
import Email from './Form-builder-elements/Email';
import FileUpload from './Form-builder-elements/FileUpload';
import ImageCapture from './Form-builder-elements/ImageCapture';
import Links from './Form-builder-elements/Links';
import Location from './Form-builder-elements/Location';
import LongText from './Form-builder-elements/LongText';
import MultiChoice from './Form-builder-elements/MultipleChoice';
import Numbers from './Form-builder-elements/Numbers';
import Phone from './Form-builder-elements/Phone';
import Ratings from './Form-builder-elements/Ratings';
import ShortText from './Form-builder-elements/ShortText';
import SingleChoice from './Form-builder-elements/SingleChoice';
import TimeElement from './Form-builder-elements/TimeElement';

const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);
  return result;
};

const ActiveView = props => {
  const { activeView, formData, reoderCurrentView, activePage } = props;
  const allElements = [];
  const [currentIndex, setCurrentIndex] = useState([]);
  useEffect(() => {
    // Add serial numbers to all all elements except agreement
    formData.map(page => {
      allElements.push(page);
    });
    const copyCurrentIndex = [];
    const allPages = [];
    formData.map(page => allPages.push(page.elements));
    const flatAllPages = allPages.flat();
    flatAllPages.map(elem => {
      if (elem?.type !== 'defaultText') {
        copyCurrentIndex.push(elem?.unique_id);
      }
    });
    setCurrentIndex(copyCurrentIndex);
  }, [activeView]);

  const onDragEnd = result => {
    // dropped outside the list
    const tempView = [...activeView];

    if (!result.destination) {
      return;
    }

    const newView = reorder(
      tempView,
      result.source.index,
      result.destination.index
    );
    reoderCurrentView(formData, newView, activePage);
  };

  return /*#__PURE__*/ React.createElement(
    'div',
    null,
    /*#__PURE__*/ React.createElement(
      DragDropContext,
      {
        onDragEnd: result => onDragEnd(result),
      },
      /*#__PURE__*/ React.createElement(
        Droppable,
        {
          droppableId: 'droppable',
        },
        provided =>
          /*#__PURE__*/ React.createElement(
            'div',
            _extends(
              {
                style: {
                  marginBottom: '15px',
                },
              },
              provided.droppableProps,
              {
                ref: provided.innerRef,
              }
            ),
            activeView.map((element, i) =>
              /*#__PURE__*/ React.createElement(
                Draggable,
                {
                  key: element.unique_id,
                  draggableId: `id_${element.unique_id}`,
                  index: i,
                },
                provided =>
                  /*#__PURE__*/ React.createElement(
                    'div',
                    _extends(
                      {
                        ref: provided.innerRef,
                      },
                      provided.draggableProps,
                      provided.dragHandleProps
                    ),
                    element.type === 'shortText' &&
                      /*#__PURE__*/ React.createElement(ShortText, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'longText' &&
                      /*#__PURE__*/ React.createElement(LongText, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'phoneNumber' &&
                      /*#__PURE__*/ React.createElement(Phone, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'email' &&
                      /*#__PURE__*/ React.createElement(Email, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'links' &&
                      /*#__PURE__*/ React.createElement(Links, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'date' &&
                      /*#__PURE__*/ React.createElement(DateElement, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'time' &&
                      /*#__PURE__*/ React.createElement(TimeElement, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'agreement' &&
                      /*#__PURE__*/ React.createElement(Agreement, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'multiChoice' &&
                      /*#__PURE__*/ React.createElement(MultiChoice, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'singleChoice' &&
                      /*#__PURE__*/ React.createElement(SingleChoice, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'dropDown' &&
                      /*#__PURE__*/ React.createElement(DropDownElement, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'rating' &&
                      /*#__PURE__*/ React.createElement(Ratings, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'fileUpload' &&
                      /*#__PURE__*/ React.createElement(FileUpload, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'imageCapture' &&
                      /*#__PURE__*/ React.createElement(ImageCapture, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'number' &&
                      /*#__PURE__*/ React.createElement(Numbers, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'locationMap' &&
                      /*#__PURE__*/ React.createElement(Location, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'areaMap' &&
                      /*#__PURE__*/ React.createElement(AreaMap, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      }),
                    element.type === 'address' &&
                      /*#__PURE__*/ React.createElement(Address, {
                        elementDetails: element,
                        index: i,
                        serialNumber: currentIndex.indexOf(element.unique_id),
                      })
                  )
              )
            ),
            provided.placeholder
          )
      )
    )
  );
};

const mapStateToProps = state => ({
  formData: state.formBuilder.formData,
  formName: state.formBuilder.name,
  activePage: state.formBuilder.activePage,
  activeView: state.formBuilder.activeView,
});

export default connect(mapStateToProps, {
  reoderCurrentView,
  editElementLabel,
})(ActiveView);
