import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread";

/**
 * Web RangeSlider Component
 *
 */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { registerElement, validateDOMAttributes } from '../../shared/component-helper'; // import './style/dnb-range-slider.css' // no good solution to import the style here

import Slider from '../../components/slider/Slider';
import Input from '../../components/input/Input';
import Modal from '../../components/modal/Modal';
import FormLabel from '../../components/form-label/FormLabel';
const renderProps = {};
export const propTypes = {
  label_text: PropTypes.string.isRequired,
  range_min: PropTypes.number.isRequired,
  range_max: PropTypes.number.isRequired,
  range_val: PropTypes.number.isRequired,
  range_step: PropTypes.number.isRequired,
  range_output_description: PropTypes.string.isRequired,
  range_output_extra_information: PropTypes.string.isRequired,
  range_trigger_text: PropTypes.string.isRequired,
  range_modal_text: PropTypes.string.isRequired,
  class: PropTypes.string,

  /** React props */
  className: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]) // Web Component props

};
export const defaultProps = _objectSpread({
  title: null,
  text: null,
  descriptionListData: null,
  descriptionListInfo: null,
  class: null,

  /** React props */
  className: null,
  children: null
}, renderProps);
export default class RangeSlider extends PureComponent {
  static enableWebComponent() {
    registerElement(RangeSlider.tagName, RangeSlider, defaultProps);
  }

  constructor(props) {
    super(props);

    _defineProperty(this, "state", {
      value: null
    });

    this.state.value = props.range_val;
  }

  render() {
    const {
      range_min,
      range_max,
      // range_val,
      range_step,
      label_text,
      range_output_description,
      range_output_extra_information,
      range_trigger_text,
      range_modal_text,
      className,
      class: _className
    } = this.props;
    const params = {
      className: classnames('dnb-range-slider', className, _className) // also used for code markup simulation

    };
    validateDOMAttributes(this.props, params);
    return React.createElement("div", params, React.createElement("div", {
      className: "dnb-range-slider__label"
    }, React.createElement("div", {
      className: "dnb-range-slider__label__inner"
    }, React.createElement(FormLabel, {
      for_id: "range-slider",
      text: label_text
    }))), React.createElement("div", {
      className: "dnb-range-slider__slider"
    }, React.createElement("div", {
      className: "dnb-range-slider__input-container"
    }, React.createElement(Slider, {
      id: "range-slider",
      min: range_min,
      max: range_max,
      value: this.state.value,
      step: range_step,
      on_init: (_ref) => {
        let {
          value
        } = _ref;
        this.setState({
          value
        });
      },
      on_change: (_ref2) => {
        let {
          value
        } = _ref2;
        this.setState({
          value
        });
      }
    })), React.createElement("div", {
      className: "dnb-range-slider__output-container"
    }, React.createElement(Input, {
      type: "text",
      size: "large",
      value: this.state.value,
      font_class: "typo-light dnb-typo-number--oldstyle",
      description: range_output_description,
      status: range_output_extra_information,
      status_state: "info",
      on_change: (_ref3) => {
        let {
          value
        } = _ref3;
        this.setState({
          value: parseFloat(value)
        });
      }
    })), React.createElement("div", {
      className: "dnb-range-slider__slider__modal"
    }, React.createElement(Modal, {
      type: "button",
      trigger_text: range_trigger_text,
      modal_content: range_modal_text
    }))));
  }

}

_defineProperty(RangeSlider, "tagName", 'dnb-range-slider');

_defineProperty(RangeSlider, "defaultProps", defaultProps);

RangeSlider.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};