// @flow
import React, { useState, useCallback, useMemo } from 'react';
import { v4 } from 'uuid';
import { action } from '@storybook/addon-actions';
import { RadioButton } from './radio-button.component';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import docs from './radio-button.mdx';

export default {
  component: RadioButton,
  title: 'Components/Inputs/RadioButton',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

type RadioButtonDemoProps = {|
  identifiers: string[],
|};
const RadioButtonDemo = ({ identifiers }: RadioButtonDemoProps) => {
  const [demoSelectedIdentifier, setDemoSelectedIdentifier] = useState('');

  const onDemoSelectedValueChange = useCallback((newSelectedIdentifier) => {
    setDemoSelectedIdentifier(newSelectedIdentifier);
    action('option changed')(newSelectedIdentifier);
  }, []);

  const uniqueId = useMemo(() => v4(), []);
  return (
    <fieldset id={`demo-${uniqueId}`}>
      {identifiers.map((identifier) => (
        <RadioButton
          name={`demo-${uniqueId}`}
          id={identifier}
          key={identifier}
          text={`${identifier} - ${
            identifier === demoSelectedIdentifier
              ? 'I am the chosen one'
              : 'I am NOT the chosen one'
          }`}
          selected={identifier === demoSelectedIdentifier}
          onClick={onDemoSelectedValueChange}
        />
      ))}
    </fieldset>
  );
};

const identifiers = [
  'radio-button-id-1',
  'radio-button-id-2',
  'radio-button-id-3',
  'radio-button-id-4',
];

export const Demo = () => <RadioButtonDemo identifiers={identifiers} />;

export const MixinsSpacing = () => (
  <>
    <MarginChecker
      Component={RadioButton}
      name="check"
      text="check me"
      selected
      onClick={action('click')}
    />
    <PaddingChecker
      Component={RadioButton}
      name="check"
      text="check me"
      selected
      onClick={action('click')}
    />
  </>
);

export const MixinsStackee = () => (
  <StackeeChecker
    Component={RadioButton}
    name="check"
    text="check me"
    selected
    onClick={action('click')}
  />
);
