import React, { useState } from 'react';
import { connect } from 'react-redux';
import { FormFieldButton } from '../../../components/common/buttons/IconButton';
import { nanoid } from 'nanoid';
import {
  AccordionWrapper,
  BasicAccordionItem,
} from '../../../components/form-builder/FormControlAccordion';
import {
  FormBuilderside,
  FormElSearch,
} from '../../../containers/form-containers/FormBuilderLayouts';
import {
  addAgreement,
  addChoiceQuestion,
  addShortTextElement,
  addRatingElement,
  addFileUploadElement,
  addLocationElement,
} from '../../../redux/action-creators/form-builder-actions/form-builder.actions';

const FormBuilderControls = props => {
  const [active, setActive] = useState(false);
  const {
    addShortTextElement,
    formData,
    activePage,
    addAgreement,
    addChoiceQuestion,
    addRatingElement,
    addFileUploadElement,
    addLocationElement,
    scrollToBottom,
  } = props;
  return /*#__PURE__*/ React.createElement(
    FormBuilderside,
    {
      active: active,
      setActive: setActive,
    },
    /*#__PURE__*/ React.createElement(FormElSearch, null),
    /*#__PURE__*/ React.createElement(
      AccordionWrapper,
      null,
      /*#__PURE__*/ React.createElement(
        BasicAccordionItem,
        {
          title: 'Input',
        },
        /*#__PURE__*/ React.createElement(
          'ul',
          {
            className: 'form-field-list',
          },
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addShortTextElement(
                  'shortText',
                  nanoid(),
                  formData,
                  activePage,
                  'Short text'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addShortTextElement(
                  'shortText',
                  nanoid(),
                  formData,
                  activePage,
                  'Short text'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Short text',
              description: 'Great for short answers',
              svg: 'short-text',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addShortTextElement(
                  'longText',
                  nanoid(),
                  formData,
                  activePage,
                  'Long text'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addShortTextElement(
                  'longText',
                  nanoid(),
                  formData,
                  activePage,
                  'Long text'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Long text',
              description: 'Great for longer answers',
              svg: 'long-text',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addShortTextElement(
                  'phoneNumber',
                  nanoid(),
                  formData,
                  activePage,
                  'Phone number'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addShortTextElement(
                  'phoneNumber',
                  nanoid(),
                  formData,
                  activePage,
                  'Phone number'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Phone number',
              description: 'Request for mobile number',
              svg: 'phone-number',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addShortTextElement(
                  'email',
                  nanoid(),
                  formData,
                  activePage,
                  'Email'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addShortTextElement(
                  'email',
                  nanoid(),
                  formData,
                  activePage,
                  'Email'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Email Address',
              description: 'Request for email address',
              svg: 'email',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addShortTextElement(
                  'links',
                  nanoid(),
                  formData,
                  activePage,
                  'Links'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addShortTextElement(
                  'links',
                  nanoid(),
                  formData,
                  activePage,
                  'Web link'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Links',
              description: 'Request for any type link',
              svg: 'links',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addShortTextElement(
                  'date',
                  nanoid(),
                  formData,
                  activePage,
                  'Date'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addShortTextElement(
                  'date',
                  nanoid(),
                  formData,
                  activePage,
                  'Date'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Date',
              description: 'Accept answers in date format',
              svg: 'date',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addShortTextElement(
                  'time',
                  nanoid(),
                  formData,
                  activePage,
                  'Time'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addShortTextElement(
                  'time',
                  nanoid(),
                  formData,
                  activePage,
                  'Time'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Time',
              description: 'Accept answers in time format',
              svg: 'time',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addShortTextElement(
                  'number',
                  nanoid(),
                  formData,
                  activePage,
                  'Number'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addShortTextElement(
                  'number',
                  nanoid(),
                  formData,
                  activePage,
                  'Number'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Number',
              description: 'Accept answers in number format',
              svg: 'number',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addAgreement(
                  'agreement',
                  nanoid(),
                  formData,
                  activePage,
                  'Agreement'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addAgreement(
                  'agreement',
                  nanoid(),
                  formData,
                  activePage,
                  'Agreement'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Agreement',
              description: 'Ensure mandatory acceptance',
              svg: 'agreement',
            })
          )
        )
      ),
      /*#__PURE__*/ React.createElement(
        BasicAccordionItem,
        {
          title: 'Choices',
        },
        /*#__PURE__*/ React.createElement(
          'ul',
          {
            className: 'form-field-list',
          },
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addChoiceQuestion(
                  'multiChoice',
                  nanoid(),
                  formData,
                  activePage,
                  'Multiple Selection'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addChoiceQuestion(
                  'multiChoice',
                  nanoid(),
                  formData,
                  activePage,
                  'Multiple Selection'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Multiple selection',
              description: 'Choose multiple options',
              svg: 'multi-choice',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addChoiceQuestion(
                  'singleChoice',
                  nanoid(),
                  formData,
                  activePage,
                  'Single selection'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addChoiceQuestion(
                  'singleChoice',
                  nanoid(),
                  formData,
                  activePage,
                  'Single selection'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Single selection',
              description: 'Select only one option',
              svg: 'single-choice',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addChoiceQuestion(
                  'dropDown',
                  nanoid(),
                  formData,
                  activePage,
                  'Drop down'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addChoiceQuestion(
                  'dropDown',
                  nanoid(),
                  formData,
                  activePage,
                  'Drop down'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Dropdown',
              description: 'Selects one option from a list',
              svg: 'dropdown',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addRatingElement(
                  'rating',
                  nanoid(),
                  formData,
                  activePage,
                  'Rating'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addRatingElement(
                  'rating',
                  nanoid(),
                  formData,
                  activePage,
                  'Rating'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Rating',
              description: 'Request feedback on anything',
              svg: 'ratings',
            })
          )
        )
      ),
      /*#__PURE__*/ React.createElement(
        BasicAccordionItem,
        {
          title: 'Uploads',
        },
        /*#__PURE__*/ React.createElement(
          'ul',
          {
            className: 'form-field-list',
          },
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addFileUploadElement(
                  'fileUpload',
                  nanoid(),
                  formData,
                  activePage,
                  'File upload'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addFileUploadElement(
                  'fileUpload',
                  nanoid(),
                  formData,
                  activePage,
                  'File upload'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'File upload',
              description: 'Request Docs and media files',
              svg: 'file-upload',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addFileUploadElement(
                  'imageCapture',
                  nanoid(),
                  formData,
                  activePage,
                  'Image Capture'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addFileUploadElement(
                  'imageCapture',
                  nanoid(),
                  formData,
                  activePage,
                  'Image capture'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Image capture',
              description: 'Request an image file',
              svg: 'image-capture',
            })
          )
        )
      ),
      /*#__PURE__*/ React.createElement(
        BasicAccordionItem,
        {
          title: 'Locations',
        },
        /*#__PURE__*/ React.createElement(
          'ul',
          {
            className: 'form-field-list',
          },
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addFileUploadElement(
                  'locationMap',
                  nanoid(),
                  formData,
                  activePage,
                  'Location'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addFileUploadElement(
                  'locationMap',
                  nanoid(),
                  formData,
                  activePage,
                  'Location'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Location',
              description: 'Collect location details',
              svg: 'location',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addFileUploadElement(
                  'areaMap',
                  nanoid(),
                  formData,
                  activePage,
                  'Area map'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addFileUploadElement(
                  'areaMap',
                  nanoid(),
                  formData,
                  activePage,
                  'Area map'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Area map',
              description: 'Capture location size',
              svg: 'area-map',
            })
          ),
          /*#__PURE__*/ React.createElement(
            'li',
            {
              onDragEnd: () => {
                addLocationElement(
                  'address',
                  nanoid(),
                  formData,
                  activePage,
                  'Address'
                );
                setActive(false);
                scrollToBottom();
              },
              draggable: true,
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'drag-icon',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#drag',
              })
            ),
            /*#__PURE__*/ React.createElement(FormFieldButton, {
              onclick: () => {
                addLocationElement(
                  'address',
                  nanoid(),
                  formData,
                  activePage,
                  'Address'
                );
                setActive(false);
                scrollToBottom();
              },
              title: 'Address',
              description: 'Request address',
              svg: 'address',
            })
          )
        )
      )
    )
  );
};

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

export default connect(mapStateToProps, {
  addShortTextElement,
  addAgreement,
  addChoiceQuestion,
  addRatingElement,
  addFileUploadElement,
  addLocationElement,
})(FormBuilderControls);
