// @flow
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Range } from './range.component';
import { Text } from '../../typography';
import { Box } from '../../../primitives';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import docs from './range.mdx';

export default {
  component: Range,
  title: 'Forms/Range',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

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}
    />
  );
};

const rangeMapping = [
  'I would withdraw all of my money',
  'I would withdraw some of my money',
  "I'd stay invested but wouldn't add more",
  'I would keep adding to my investments',
];

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

  const currentValueLabel = rangeMapping[range];

  return (
    <Box>
      <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}
      />
    </Box>
  );
};

export const Demo = () => <Interactive />;
export const HiddenLabel = () => <Interactive hideLabel label="It is hidden" />;
export const ExternalLabel = () => <RiskScoreExample />;

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker
    Component={Range}
    min={0}
    max={3}
    value={2}
    onRangeChange={action('rangeChange')}
    label="Pick a number"
  />
);

export const MixinsStackee = () => (
  <StackeeChecker
    Component={Range}
    min={0}
    max={3}
    value={2}
    onRangeChange={action('rangeChange')}
    label="Pick a number"
  />
);
