// @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 { StackedChecker } from '../../../mixins/stacking/story-support/stacked-checker';
import { Text, Span } from '../../typography';

import docs from './radio-button.mdx';

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

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

export const Demo = () => {
  const [selectedValue, setDemoSelectedIdentifier] = useState('');

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

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

export const DirectionRight = () => (
  <RadioButton
    name="demo-right"
    id="option-1"
    selected
    onClick={action('onClick')}
    direction="right"
    text="button to the right"
  />
);

export const CustomChildren = () => (
  <RadioButton
    name="demo-right"
    id="option-1"
    selected
    onClick={action('onClick')}
  >
    <Text colorName="brand-secondary-fg" spacing="m0">
      I am{' '}
      <Span bold italic>
        custom
      </Span>
    </Text>
  </RadioButton>
);

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

export const MixinsStacked = () => <StackedChecker Component={RadioButton} />;
