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,
  updateRatingNumber,
} from '../../../redux/action-creators/form-builder-actions/form-builder.actions';
import { numbersOnly } from '../../../utils/helpers';

const Ratings = ({
  setActiveElement,
  activeElement,
  serialNumber,
  elementDetails,
  editElementLabel,
  editElementDescription,
  index,
  toggleAction,
  duplicateElement,
  deleteFormElement,
  changeFormElement,
  updateRatingNumber,
}) => {
  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-ratings"></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
              value={elementDetails.description}
              maxLength={250}
              onchange={value => editElementDescription(value)}
              placeholder="Add Your Description Here"
            />
          </div>
          <div className="d-flx-alc">
            <p className="mr-6">Steps</p>
            <div className="d-flx-alc input-width mr-6">
              <InputWOLabel
                value={
                  elementDetails.numOfRatings ? elementDetails.numOfRatings : ''
                }
                maxLength={2}
                type="number"
                onchange={value => {
                  if (numbersOnly(value) || value === '') {
                    if (parseInt(value) < 11 || value === '') {
                      updateRatingNumber(value);
                    }
                  }
                }}
                placeholder="0"
              />
              <div className="slider-wrapper"></div>
            </div>
          </div>
          <div className="d-flx-alc-jfe form-field-settings-footer">
            <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 className="form-field-preview">
          <QuestionTag className="question-tag">
            <svg className="bg-svg">
              <use href="/images/icons.svg#fb-ratings"></use>
            </svg>
            <span>Q{serialNumber + 1}</span>
          </QuestionTag>
          <div className="preview-content">
            <h4>
              {elementDetails.label}{' '}
              {elementDetails.isMandatory && <span>*</span>}
            </h4>
            <p>{elementDetails.description}</p>
            {elementDetails.numOfRatings ? (
              <InputSample>
                {Array.from(Array(elementDetails.numOfRatings), e => {
                  return (
                    <svg key={e}>
                      <use href="/images/icons.svg#preview-ratings"></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,
  updateRatingNumber,
})(Ratings);

const InputSample = styled.div`
  margin-top: 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  svg {
    width: 40px;
    height: 40px;
    color: #c5c9da;
    margin-right: 1rem;
    @media (min-width: 768px) {
      margin-right: 3rem;
    }
  }
`;

const QuestionTag = styled.div`
  background: #e9dbc3;
  padding: 0 0.85rem;
`;
