import React 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 { FormFieldWrapper } from '../../../containers/form-containers/FormBuilderLayouts';
import { connect } from 'react-redux';
import {
  setActiveElement,
  editElementLabel,
  editElementDescription,
  setMinMaxChars,
  toggleAction,
  duplicateElement,
  deleteFormElement,
  changeFormElement,
  uploadElementImage,
  getUploadUrl,
  removeElementImage,
} from '../../../redux/action-creators/form-builder-actions/form-builder.actions';

const TimeElement = ({
  setActiveElement,
  activeElement,
  serialNumber,
  elementDetails,
  editElementLabel,
  editElementDescription,
  index,
  toggleAction,
  duplicateElement,
  deleteFormElement,
  changeFormElement,
}) => {
  const onToggleRequired = () => {
    toggleAction('isMandatory');
  };

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

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

  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-time',
              })
            ),
            /*#__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: 'd-flx-alc-jfe form-field-settings-footer',
          },
          /*#__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(
          QuestionTag,
          {
            className: 'question-tag',
          },
          /*#__PURE__*/ React.createElement(
            'svg',
            {
              className: 'bg-svg',
            },
            /*#__PURE__*/ React.createElement('use', {
              href: '/images/icons.svg#fb-time',
            })
          ),
          /*#__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,
            /*#__PURE__*/ React.createElement('p', null, '00 : 00 AM'),
            /*#__PURE__*/ React.createElement(
              'svg',
              {
                className: 'bg-svg',
              },
              /*#__PURE__*/ React.createElement('use', {
                href: '/images/icons.svg#time',
              })
            )
          )
        )
      )
    )
  );
};

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,
})(TimeElement);
const InputSample = styled.div`
  background: #f7f7f8;
  height: 44px;
  margin-top: 2rem;
  padding: 1.25rem;
  border-radius: 4px;
  border-bottom: 2px solid #c5c9da;
  width: 100%;
  max-width: 346px;
  display: flex;
  justify-content: space-between;
  svg {
    color: #61677c;
    width: 20px;
    height: 17px;
  }
`;
const QuestionTag = styled.div`
  background: #d4d5d9;
  padding: 0 0.85rem;
`;
