import React from 'react';
import FadeIn from 'react-fade-in';
import styled from 'styled-components';
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 DateElement = ({
  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 (
    <FormFieldWrapper
      onclick={() => setActiveElement(elementDetails.unique_id)}
      className={elementDetails.unique_id === activeElement ? 'active' : ''}
    >
      <FadeIn>
        <div className="form-field-settings">
          <div className="form-field-question mb-3">
            <QuestionTag className="question-tag ">
              <svg className="bg-svg">
                <use href="/images/icons.svg#fb-date"></use>
              </svg>
              <span>Q{serialNumber + 1}</span>
            </QuestionTag>
            <FbQuestionInput
              onchange={val => editElementLabel(val)}
              value={elementDetails.label}
              placeholder="Enter Your Question Here"
            />
            <FbDropElement
              type={elementDetails.type}
              onSelect={switchElement}
            />
          </div>
          <div className="inputwo-label-wrap mb-3">
            <InputWOLabel
              maxLength={250}
              value={elementDetails.description}
              onchange={value => editElementDescription(value)}
              placeholder="Add Your Description Here"
            />
          </div>

          <div className="d-flx-alc-jfe form-field-settings-footer">
            <div className="d-flx-alc">
              <BasicSwitch
                checked={elementDetails.isMandatory}
                title="Required"
                onchange={onToggleRequired}
                className="mr-2"
              />
              <BasicSwitch
                onchange={onToggleHidden}
                checked={elementDetails.hidden}
                title="Hidden"
                className="mr-2"
              />
              <span onClick={() => duplicateElement(elementDetails, index)}>
                <PrimaryIconButton
                  title="Duplicate"
                  svg="duplicate"
                  className="mr-2"
                  color="#61677C"
                />
              </span>
              <span onClick={() => deleteFormElement(elementDetails.unique_id)}>
                <PrimaryIconButton
                  title="Delete"
                  svg="delete-alt"
                  color="#61677C"
                />
              </span>
            </div>
          </div>
        </div>
        <div className="form-field-preview">
          <QuestionTag className="question-tag">
            <svg className="bg-svg">
              <use href="/images/icons.svg#fb-date"></use>
            </svg>
            <span>Q{serialNumber + 1}</span>
          </QuestionTag>
          <div className="preview-content">
            <h4>
              {elementDetails.label}{' '}
              {elementDetails.isMandatory && <span>*</span>}
            </h4>
            <p>{elementDetails.description}</p>
            <InputSample>
              <p>MM / DD / YY</p>
              <svg className="bg-svg">
                <use href="/images/icons.svg#calendar"></use>
              </svg>
            </InputSample>
          </div>
        </div>
      </FadeIn>
    </FormFieldWrapper>
  );
};

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,
})(DateElement);

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: #e9dbc3;
  padding: 0 0.85rem;
`;
