// @flow
import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';

import { Range } from './index';
import { Text } from '../../typography';

type InteractiveProps = { label?: string, hideLabel?: boolean };
export const Interactive = ({
  label = 'Label',
  hideLabel = false,
}: InteractiveProps) => {
  const [range, setRange] = useState(5);

  return (
    <Range
      label={label}
      hideLabel={hideLabel}
      min={1}
      max={8}
      value={range}
      onRangeChange={setRange}
    />
  );
};

// Flow doesn't play nicely with numbers as object literals
const rangeMapping = {
  '0': 'I would withdraw all of my money',
  '1': 'I would withdraw some of my money',
  '2': "I'd stay invested but wouldn't add more",
  '3': 'I would keep adding to my investments',
};

export const RiskScoreExample = () => {
  const [range, setRange] = useState(2);

  const currentValueLabel = rangeMapping[String(range)];

  return (
    <section>
      <Text id="range-label" bold fontSize="f3" align="center">
        {currentValueLabel}
      </Text>

      <Range
        minLabel="Withdraw everything"
        maxLabel="Deposit more"
        ariaLabelledBy="range-label"
        ariaValuetext={currentValueLabel}
        min={0}
        max={3}
        value={range}
        onRangeChange={setRange}
      />
    </section>
  );
};

storiesOf('Core/Forms/Range', module)
  .add('with label', () => <Interactive />)
  .add('with label hidden', () => (
    <Interactive hideLabel label="It is hidden" />
  ))
  .add('with external label', () => <RiskScoreExample />);
