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 (
    <FormBuilderside active={active} setActive={setActive}>
      <FormElSearch />
      <AccordionWrapper>
        <BasicAccordionItem title="Input">
          <ul className="form-field-list">
            <li
              onDragEnd={() => {
                addShortTextElement(
                  'shortText',
                  nanoid(),
                  formData,
                  activePage,
                  'Short text'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addShortTextElement(
                    'shortText',
                    nanoid(),
                    formData,
                    activePage,
                    'Short text'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Short text"
                description="Great for short answers"
                svg="short-text"
              />
            </li>
            <li
              onDragEnd={() => {
                addShortTextElement(
                  'longText',
                  nanoid(),
                  formData,
                  activePage,
                  'Long text'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addShortTextElement(
                    'longText',
                    nanoid(),
                    formData,
                    activePage,
                    'Long text'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Long text"
                description="Great for longer answers"
                svg="long-text"
              />
            </li>
            <li
              onDragEnd={() => {
                addShortTextElement(
                  'phoneNumber',
                  nanoid(),
                  formData,
                  activePage,
                  'Phone number'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addShortTextElement(
                    'phoneNumber',
                    nanoid(),
                    formData,
                    activePage,
                    'Phone number'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Phone number"
                description="Request for mobile number"
                svg="phone-number"
              />
            </li>
            <li
              onDragEnd={() => {
                addShortTextElement(
                  'email',
                  nanoid(),
                  formData,
                  activePage,
                  'Email'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addShortTextElement(
                    'email',
                    nanoid(),
                    formData,
                    activePage,
                    'Email'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Email Address"
                description="Request for email address"
                svg="email"
              />
            </li>
            <li
              onDragEnd={() => {
                addShortTextElement(
                  'links',
                  nanoid(),
                  formData,
                  activePage,
                  'Links'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addShortTextElement(
                    'links',
                    nanoid(),
                    formData,
                    activePage,
                    'Web link'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Links"
                description="Request for any type link"
                svg="links"
              />
            </li>
            <li
              onDragEnd={() => {
                addShortTextElement(
                  'date',
                  nanoid(),
                  formData,
                  activePage,
                  'Date'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addShortTextElement(
                    'date',
                    nanoid(),
                    formData,
                    activePage,
                    'Date'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Date"
                description="Accept answers in date format"
                svg="date"
              />
            </li>
            <li
              onDragEnd={() => {
                addShortTextElement(
                  'time',
                  nanoid(),
                  formData,
                  activePage,
                  'Time'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addShortTextElement(
                    'time',
                    nanoid(),
                    formData,
                    activePage,
                    'Time'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Time"
                description="Accept answers in time format"
                svg="time"
              />
            </li>
            <li
              onDragEnd={() => {
                addShortTextElement(
                  'number',
                  nanoid(),
                  formData,
                  activePage,
                  'Number'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addShortTextElement(
                    'number',
                    nanoid(),
                    formData,
                    activePage,
                    'Number'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Number"
                description="Accept answers in number format"
                svg="number"
              />
            </li>
            <li
              onDragEnd={() => {
                addAgreement(
                  'agreement',
                  nanoid(),
                  formData,
                  activePage,
                  'Agreement'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addAgreement(
                    'agreement',
                    nanoid(),
                    formData,
                    activePage,
                    'Agreement'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Agreement"
                description="Ensure mandatory acceptance"
                svg="agreement"
              />
            </li>
          </ul>
        </BasicAccordionItem>
        <BasicAccordionItem title="Choices">
          <ul className="form-field-list">
            <li
              onDragEnd={() => {
                addChoiceQuestion(
                  'multiChoice',
                  nanoid(),
                  formData,
                  activePage,
                  'Multiple Selection'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addChoiceQuestion(
                    'multiChoice',
                    nanoid(),
                    formData,
                    activePage,
                    'Multiple Selection'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Multiple selection"
                description="Choose multiple options"
                svg="multi-choice"
              />
            </li>
            <li
              onDragEnd={() => {
                addChoiceQuestion(
                  'singleChoice',
                  nanoid(),
                  formData,
                  activePage,
                  'Single selection'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addChoiceQuestion(
                    'singleChoice',
                    nanoid(),
                    formData,
                    activePage,
                    'Single selection'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Single selection"
                description="Select only one option"
                svg="single-choice"
              />
            </li>
            <li
              onDragEnd={() => {
                addChoiceQuestion(
                  'dropDown',
                  nanoid(),
                  formData,
                  activePage,
                  'Drop down'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addChoiceQuestion(
                    'dropDown',
                    nanoid(),
                    formData,
                    activePage,
                    'Drop down'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Dropdown"
                description="Selects one option from a list"
                svg="dropdown"
              />
            </li>
            <li
              onDragEnd={() => {
                addRatingElement(
                  'rating',
                  nanoid(),
                  formData,
                  activePage,
                  'Rating'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addRatingElement(
                    'rating',
                    nanoid(),
                    formData,
                    activePage,
                    'Rating'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Rating"
                description="Request feedback on anything"
                svg="ratings"
              />
            </li>
          </ul>
        </BasicAccordionItem>
        <BasicAccordionItem title="Uploads">
          <ul className="form-field-list">
            <li
              onDragEnd={() => {
                addFileUploadElement(
                  'fileUpload',
                  nanoid(),
                  formData,
                  activePage,
                  'File upload'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addFileUploadElement(
                    'fileUpload',
                    nanoid(),
                    formData,
                    activePage,
                    'File upload'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="File upload"
                description="Request Docs and media files"
                svg="file-upload"
              />
            </li>
            <li
              onDragEnd={() => {
                addFileUploadElement(
                  'imageCapture',
                  nanoid(),
                  formData,
                  activePage,
                  'Image Capture'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addFileUploadElement(
                    'imageCapture',
                    nanoid(),
                    formData,
                    activePage,
                    'Image capture'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Image capture"
                description="Request an image file"
                svg="image-capture"
              />
            </li>
          </ul>
        </BasicAccordionItem>
        <BasicAccordionItem title="Locations">
          <ul className="form-field-list">
            <li
              onDragEnd={() => {
                addFileUploadElement(
                  'locationMap',
                  nanoid(),
                  formData,
                  activePage,
                  'Location'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addFileUploadElement(
                    'locationMap',
                    nanoid(),
                    formData,
                    activePage,
                    'Location'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Location"
                description="Collect location details"
                svg="location"
              />
            </li>
            <li
              onDragEnd={() => {
                addFileUploadElement(
                  'areaMap',
                  nanoid(),
                  formData,
                  activePage,
                  'Area map'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addFileUploadElement(
                    'areaMap',
                    nanoid(),
                    formData,
                    activePage,
                    'Area map'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Area map"
                description="Capture location size"
                svg="area-map"
              />
            </li>
            <li
              onDragEnd={() => {
                addLocationElement(
                  'address',
                  nanoid(),
                  formData,
                  activePage,
                  'Address'
                );
                setActive(false);
                scrollToBottom();
              }}
              draggable={true}
            >
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                onclick={() => {
                  addLocationElement(
                    'address',
                    nanoid(),
                    formData,
                    activePage,
                    'Address'
                  );
                  setActive(false);
                  scrollToBottom();
                }}
                title="Address"
                description="Request address"
                svg="address"
              />
            </li>
          </ul>
        </BasicAccordionItem>
        {/* <BasicAccordionItem title="Payments">
          <ul className="form-field-list">
            <li draggable={true}>
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                title="Bank transfer (Coming soon!)"
                description="Single line or multiline text area."
                svg="bank-transfer"
              />
            </li>
            <li draggable={true}>
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                title="Debit card (Coming soon!)"
                description="Single line or multiline text area."
                svg="debit-card"
              />
            </li>
          </ul>
        </BasicAccordionItem> */}
        {/* <BasicAccordionItem title="Layout & Sections">
          <ul className="form-field-list">
            <li draggable={true}>
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                title="Section"
                description="Single line or multiline text area."
                svg="single"
              />
            </li>
            <li draggable={true}>
              <svg className="drag-icon">
                <use href="/images/icons.svg#drag"></use>
              </svg>
              <FormFieldButton
                title="Cover Image"
                description="Single line or multiline text area."
                svg="cover-image"
              />
            </li>
          </ul>
        </BasicAccordionItem> */}
      </AccordionWrapper>
    </FormBuilderside>
  );
};

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