import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Tooltip from 'rc-tooltip';
import Slider from 'rc-slider';


const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);
const Handle = Slider.Handle;

const handle = (props) => {
  const { value, dragging, index, ...restProps } = props;
  return (
    <Tooltip
      overlay={<TT val={value}/>}
      visible={true}
      placement="top"
      key={index}
    >
      <Handle value={value} {...restProps} />
    </Tooltip>
  );
};

const TT = ({val}) => (
  <div>
    <div>
      <b>{val} mounth</b>
    </div>
    <div>
      {val*3} bottles
    </div>
  </div>
);

const wrapperStyle = { width: 400, margin: 50 };

ReactDOM.render(
  <div>
    <div style={wrapperStyle}>
      <p>Slider with custom handle and tt</p>
      <Slider min={0} max={20} defaultValue={3} handle={handle} />
    </div>
  </div>,
  document.getElementById('app')
);