import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _templateObject2() {
  const data = _taggedTemplateLiteral(["\n  height: 10rem;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  const data = _taggedTemplateLiteral(["\n  .dnb-form {\n    padding-top: 2em;\n  }\n\n  .dnb-slider__slider-row {\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    align-content: center;\n\n    .dnb-slider {\n      width: 100%;\n    }\n\n    .dnb-slider__input-container {\n      flex: 3;\n    }\n    .dnb-slider__output-container {\n      margin: 0 0 0 0.5rem;\n      flex: 2;\n    }\n    .dnb-slider__input {\n      margin: 0 0.25rem;\n    }\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

/**
 * UI lib Component Example
 *
 */
import React, { PureComponent, Fragment } from 'react';
import styled from '@emotion/styled';
import Slider from './Slider';
import Input from '../input/Input';
import FormLabel from '../../components/form-label/FormLabel';
import FormRow from '../../components/form-row/FormRow'; // import the native range slider as well

import './style/dnb-range.css';

var _ref2 =
/*#__PURE__*/
React.createElement(Slider, {
  value: "70",
  max: "100",
  disabled: true
});

var _ref3 =
/*#__PURE__*/
React.createElement("p", {
  className: "example-caption"
}, "Horizontal slider - two states: active (above) and disabled (below)");

class Example extends PureComponent {
  constructor() {
    super(...arguments);

    _defineProperty(this, "onChangeHandler", (_ref) => {
      let {
        value
      } = _ref;
      console.log('on_change', value);
    });
  }

  render() {
    return React.createElement(Fragment, null, React.createElement("div", {
      className: "example-box"
    }, React.createElement(Slider, {
      min: 0,
      max: 100,
      value: 70,
      step: 10,
      on_change: this.onChangeHandler,
      attributes: {
        'data-fake:on_change': 'SliderDemo.onChangeHandler()',
        'data-fake:on_state_update': 'SliderDemo.onStateUpdateHandler()'
      }
    }), _ref2, _ref3));
  }

}

var _ref5 =
/*#__PURE__*/
React.createElement(Example, null);

var _ref6 =
/*#__PURE__*/
React.createElement("div", {
  className: "dnb-form__item"
}, React.createElement(FormLabel, {
  for_id: "slider-2",
  text: "Hvor mye \xF8nsker du \xE5 kj\xF8pe bolig for?"
}));

var _ref12 =
/*#__PURE__*/
React.createElement("p", {
  className: "example-caption"
}, "Sliders (horizontal and vertical) with value input field");

var _ref13 =
/*#__PURE__*/
React.createElement(FormLabel, {
  id: "range-slider-label",
  for_id: "range-slider",
  text: "Native Range Slider"
});

class AditionalExample extends PureComponent {
  constructor() {
    super(...arguments);

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

    _defineProperty(this, "handleRangeChange", (_ref4) => {
      let {
        target: {
          value
        }
      } = _ref4;
      console.log(value);
    });
  }

  render() {
    return React.createElement(Wrapper, null, _ref5, React.createElement("div", {
      className: "example-box"
    }, React.createElement("form", {
      className: "dnb-form"
    }, _ref6, React.createElement("div", {
      className: "dnb-form__item"
    }, React.createElement("div", {
      className: "dnb-slider__slider-row"
    }, React.createElement("div", {
      className: "dnb-slider__input-container"
    }, React.createElement(Slider, {
      id: "slider-2",
      min: 1000000,
      max: 8000000,
      value: this.state.value,
      step: 100000,
      on_init: (_ref7) => {
        let {
          value
        } = _ref7;
        this.setState({
          value
        });
      },
      on_change: (_ref8) => {
        let {
          value
        } = _ref8;
        this.setState({
          value
        });
      }
    })), React.createElement("div", {
      className: "dnb-slider__output-container"
    }, React.createElement(Input, {
      type: "text",
      value: this.state.value,
      input_class: "dnb-typo-number--old-style" // input_class="dnb-typo-number--lining"
      ,
      description: "Kr",
      extra_information: "Maksimumsbel\xF8pet inkluderer eventuell fellesgjeld og omkostninger ved kj\xF8p.",
      on_change: (_ref9) => {
        let {
          value
        } = _ref9;
        this.setState({
          value: parseFloat(value)
        });
      }
    })))), React.createElement(Cell, {
      className: "dnb-form__item"
    }, React.createElement(Slider, {
      id: "slider-3",
      min: 1000000,
      max: 8000000,
      value: this.state.value,
      step: 10,
      vertical: true,
      reverse: true,
      on_change: (_ref10) => {
        let {
          value
        } = _ref10;
        this.setState({
          value
        });
      },
      on_state_update: (_ref11) => {
        let {
          value
        } = _ref11;
        console.log('on_state_update', value);
      }
    }))), _ref12), React.createElement("div", {
      className: "example-box"
    }, React.createElement(FormRow, null, _ref13, React.createElement("input", {
      id: "range-slider",
      type: "range",
      min: "0",
      max: "100",
      step: "5",
      defaultValue: "20",
      onChange: this.handleRangeChange
    }))));
  }

}

const Wrapper = styled.div(_templateObject());
const Cell = styled.div(_templateObject2());
export { Example };
export default AditionalExample;