import React, { useState } from 'react';
import styled from 'styled-components';
import FadeIn from 'react-fade-in';
import {
  IconButton,
  PrimaryIconButton,
} from '../../../components/common/buttons/IconButton';
import { FbDropElement } from '../../../components/common/inputs/Select';
import { BasicSwitch } from '../../../components/common/inputs/Switch';
import {
  FbQuestionInput,
  InputWOLabel,
} from '../../../components/common/inputs/TextInput';
import {
  ElementUpload,
  InsertImage,
} from '../../../components/common/inputs/UploadInput';
import { FormFieldWrapper } from '../../../containers/form-containers/FormBuilderLayouts';
import { connect } from 'react-redux';
import {
  setActiveElement,
  editElementLabel,
  editElementDescription,
  setMinMaxChars,
  toggleAction,
  duplicateElement,
  deleteFormElement,
  changeFormElement,
  uploadElementImage,
  getUploadUrl,
  removeElementImage,
  addChoiceOption,
  deleteChoiceOption,
  editOptionLabel,
  addOptionImage,
  deleteOptionImage,
  duplicateChoiceQUestion,
} from '../../../redux/action-creators/form-builder-actions/form-builder.actions';
import { nanoid } from 'nanoid';

const DropDownElement = ({
  setActiveElement,
  activeElement,
  serialNumber,
  elementDetails,
  editElementLabel,
  editElementDescription,
  index,
  toggleAction,
  deleteFormElement,
  uploadElementImage,
  getUploadUrl,
  changeFormElement,
  removeElementImage,
  addChoiceOption,
  deleteChoiceOption,
  editOptionLabel,
  duplicateChoiceQUestion,
  formData,
  activePage,
}) => {
  const [uploading, setUploading] = useState(false);

  const onToggleRequired = () => {
    toggleAction('isMandatory');
  };

  const onToggleHidden = () => {
    toggleAction('hidden');
  };

  const switchElement = type => {
    changeFormElement(type, index);
  };

  const onUploadImage = async file => {
    setUploading(true);
    const uploadData = await getUploadUrl(file);

    if (uploadData?.data?.success) {
      uploadElementImage(uploadData?.data?.data[0]);
    }

    setUploading(false);
  };

  return /*#__PURE__*/ React.createElement(
    FormFieldWrapper,
    {
      onclick: () => setActiveElement(elementDetails.unique_id),
      className: elementDetails.unique_id === activeElement ? 'active' : '',
    },
    /*#__PURE__*/ React.createElement(
      FadeIn,
      null,
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'form-field-settings',
        },
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'form-field-question mb-3',
          },
          /*#__PURE__*/ React.createElement(
            QuestionTag,
            {
              className: 'question-tag ',
            },
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'bg-svg',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#fb-dropdown',
              })
            ),
            /*#__PURE__*/ React.createElement(
              'span',
              null,
              'Q',
              serialNumber + 1
            )
          ),
          /*#__PURE__*/ React.createElement(FbQuestionInput, {
            onchange: val => editElementLabel(val),
            value: elementDetails.label,
            placeholder: 'Enter Your Question Here',
          }),
          /*#__PURE__*/ React.createElement(FbDropElement, {
            type: elementDetails.type,
            onSelect: switchElement,
          })
        ),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'inputwo-label-wrap mb-3',
          },
          /*#__PURE__*/ React.createElement(InputWOLabel, {
            value: elementDetails.description,
            maxLength: 250,
            onchange: value => editElementDescription(value),
            placeholder: 'Add Your Description Here',
          })
        ),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'mb-2',
          },
          elementDetails.options.map((opt, i) => {
            return /*#__PURE__*/ React.createElement(
              Option,
              {
                key: i,
                className: 'd-flx-alc',
              },
              /*#__PURE__*/ React.createElement(
                'div',
                {
                  className: 'space-control inputwo-label-wrap',
                },
                /*#__PURE__*/ React.createElement(InputWOLabel, {
                  value: opt?.label,
                  onchange: value => editOptionLabel(value, i),
                  placeholder: 'Option',
                })
              ),
              /*#__PURE__*/ React.createElement(
                'span',
                {
                  onClick: () => deleteChoiceOption(i),
                },
                /*#__PURE__*/ React.createElement(IconButton, {
                  svg: 'close',
                  className: 'delete-btn',
                })
              )
            );
          }),
          /*#__PURE__*/ React.createElement(
            'span',
            {
              onClick: () => addChoiceOption(),
            },
            /*#__PURE__*/ React.createElement(PrimaryIconButton, {
              svg: 'add-box',
              title: 'Add new option',
              color: '#838CA2',
            })
          )
        ),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'd-flx-alc-jsb form-field-settings-footer',
          },
          elementDetails.imageUrl?.length > 0 &&
            /*#__PURE__*/ React.createElement(ElementUpload, {
              url: elementDetails.imageUrl,
              deleteImage: removeElementImage,
            }),
          !elementDetails.imageUrl || elementDetails?.imageUrl.length < 1
            ? /*#__PURE__*/ React.createElement(InsertImage, {
                onchange: onUploadImage,
                title: !uploading ? 'Insert an image' : 'uploading...',
                svg: 'insert-image',
              })
            : '',
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx-alc',
            },
            /*#__PURE__*/ React.createElement(BasicSwitch, {
              checked: elementDetails.isMandatory,
              title: 'Required',
              onchange: onToggleRequired,
              className: 'mr-2',
            }),
            /*#__PURE__*/ React.createElement(BasicSwitch, {
              onchange: onToggleHidden,
              checked: elementDetails.hidden,
              title: 'Hidden',
              className: 'mr-2',
            }),
            /*#__PURE__*/ React.createElement(
              'span',
              {
                onClick: () =>
                  duplicateChoiceQUestion(
                    'dropDown',
                    nanoid(),
                    formData,
                    activePage,
                    'Single choice',
                    elementDetails,
                    index
                  ),
              },
              /*#__PURE__*/ React.createElement(PrimaryIconButton, {
                title: 'Duplicate',
                svg: 'duplicate',
                className: 'mr-2',
                color: '#61677C',
              })
            ),
            /*#__PURE__*/ React.createElement(
              'span',
              {
                onClick: () => deleteFormElement(elementDetails.unique_id),
              },
              /*#__PURE__*/ React.createElement(PrimaryIconButton, {
                title: 'Delete',
                svg: 'delete-alt',
                color: '#61677C',
              })
            )
          )
        )
      ),
      /*#__PURE__*/ React.createElement(
        'div',
        {
          className: 'form-field-preview',
        },
        /*#__PURE__*/ React.createElement(
          QuestionTag,
          {
            className: 'question-tag',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            {
              className: 'bg-svg',
            },
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#fb-dropdown',
            })
          ),
          /*#__PURE__*/ React.createElement('span', null, 'Q', serialNumber + 1)
        ),
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'preview-content',
          },
          /*#__PURE__*/ React.createElement(
            'h4',
            null,
            elementDetails.label,
            ' ',
            elementDetails.isMandatory &&
              /*#__PURE__*/ React.createElement('span', null, '*')
          ),
          /*#__PURE__*/ React.createElement(
            'p',
            null,
            elementDetails.description
          ),
          /*#__PURE__*/ React.createElement(
            SingleChoicePrev,
            null,
            elementDetails.options.map((item, i) => {
              return /*#__PURE__*/ React.createElement(
                InputSample,
                {
                  key: i,
                },
                item.label
              );
            })
          )
        )
      )
    )
  );
};

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

export default connect(mapStateToProps, {
  setActiveElement,
  editElementLabel,
  editElementDescription,
  setMinMaxChars,
  toggleAction,
  duplicateElement,
  deleteFormElement,
  changeFormElement,
  uploadElementImage,
  getUploadUrl,
  removeElementImage,
  addChoiceOption,
  deleteChoiceOption,
  editOptionLabel,
  addOptionImage,
  deleteOptionImage,
  duplicateChoiceQUestion,
})(DropDownElement);
const Option = styled.div`
  margin-bottom: 2.4rem;
  .space-control {
    min-width: 444px;
    .upload {
      margin-left: 4rem;
    }
  }
  .delete-btn {
    color: #d50033;
    svg {
      width: 20px;
      height: 20px;
    }
  }
`;
const InputSample = styled.div`
  background: #f7f7f8;
  height: 44px;
  margin-top: 2rem;
  border-radius: 4px;
  border-bottom: 2px solid #c5c9da;
  position: relative;
  padding: 1.2rem;
  padding-left: 50px;
  color: #61677c;
  font-size: 16px;
  font-family: var(--ff-medium);
`;
const SingleChoicePrev = styled.div`
  div:before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: #c5c9da;
    border-radius: 50%;
    transition: all 0.3s ease;
  }
`;
const QuestionTag = styled.div`
  background: #dee4f5;
  padding: 0 0.85rem;
`;
