import React, { useState } from 'react';
import styled from 'styled-components';
import FadeIn from 'react-fade-in';
import { 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,
  clearMinimumCharacters,
} from '../../../redux/action-creators/form-builder-actions/form-builder.actions';
import { numbersOnly } from '../../../utils/helpers';

const Numbers = ({
  setActiveElement,
  activeElement,
  serialNumber,
  elementDetails,
  editElementLabel,
  editElementDescription,
  setMinMaxChars,
  index,
  toggleAction,
  duplicateElement,
  deleteFormElement,
  uploadElementImage,
  getUploadUrl,
  changeFormElement,
  removeElementImage,
  clearMinimumCharacters,
}) => {
  const [uploading, setUploading] = useState(false);
  const [minLengthError, setMinLengthError] = useState('');

  const onChangeMinChar = value => {
    setMinMaxChars('minLength', value);
  };

  const onChangeMaxChar = value => {
    setMinMaxChars('maxLength', value);
  };

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

  const checkMaxValue = () => {
    if (
      parseInt(elementDetails.maxLength) > 0 &&
      parseInt(elementDetails.minLength) > 0 &&
      parseInt(elementDetails.minLength) > parseInt(elementDetails.maxLength)
    ) {
      setMinLengthError("min-length can't be greater than max-length");
      clearMinimumCharacters();
    }
  };

  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-number',
              })
            ),
            /*#__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: 'flx-jsb-rl',
          },
          /*#__PURE__*/ React.createElement(
            'p',
            {
              className: 'mr-6',
            },
            'Set minimum and maximum character (e.g 200)'
          ),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx-alc input-width mr-6',
            },
            /*#__PURE__*/ React.createElement(
              'p',
              {
                className: 'mr-1',
              },
              'Minimum character'
            ),
            /*#__PURE__*/ React.createElement(InputWOLabel, {
              value: elementDetails.minLength,
              onBlur: () => checkMaxValue(),
              onchange: value => {
                if (numbersOnly(value) || value === '') {
                  onChangeMinChar(value);
                  setMinLengthError('');
                }
              },
              placeholder: 'Min',
              maxLength: 5,
            }),
            /*#__PURE__*/ React.createElement(
              'small',
              {
                style: {
                  color: 'red',
                },
              },
              minLengthError
            )
          ),
          /*#__PURE__*/ React.createElement(
            'div',
            {
              className: 'd-flx-alc input-width',
            },
            /*#__PURE__*/ React.createElement(
              'p',
              {
                className: 'mr-1',
              },
              'Maximum character'
            ),
            /*#__PURE__*/ React.createElement(InputWOLabel, {
              onBlur: () => checkMaxValue(),
              value: elementDetails.maxLength,
              onchange: value => {
                if (numbersOnly(value) || value === '') {
                  onChangeMaxChar(value);
                  setMinLengthError('');
                }
              },
              maxLength: 5,
              placeholder: 'Max',
            })
          )
        ),
        /*#__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: () => duplicateElement(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(
          'div',
          {
            className: 'question-tag',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            {
              className: 'bg-svg',
            },
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#fb-number',
            })
          ),
          /*#__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(InputSample, null)
        )
      )
    )
  );
};

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,
  clearMinimumCharacters,
})(Numbers);
const InputSample = styled.div`
  background: #f7f7f8;
  height: 44px;
  margin-top: 2rem;
  border-radius: 4px;
  border-bottom: 2px solid #c5c9da;
`;
const QuestionTag = styled.div`
  background: #e5ddc6;
  padding: 0 0.85rem;
`;
