// @flow
import React, { useState, useCallback } from 'react';
import { action } from '@storybook/addon-actions';
import { TertiaryButton } from '../../actions/tertiary-button';
import { CurrencyInput } from './currency-input.component';
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 './currency-input.mdx';

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

type DemoProps = {|
  defaultValue?: number,
  placeholder?: number,
  large?: boolean,
  showValueUpdateButton?: boolean,
|};
const Demo = ({
  defaultValue,
  placeholder,
  large = false,
  showValueUpdateButton = false,
}: DemoProps) => {
  const [amount, setAmount] = useState(defaultValue);
  const handleAmountChanged = useCallback((newAmount) => {
    setAmount(newAmount);
    action('Setting amount')(newAmount);
  }, []);

  const setValue = useCallback(() => {
    handleAmountChanged(123.45);
  }, [handleAmountChanged]);

  return (
    <Box stacked="row" align="center">
      <CurrencyInput
        label="Amount"
        hideLabel={showValueUpdateButton}
        currency="CAD"
        onChange={handleAmountChanged}
        value={amount}
        placeholder={placeholder}
        large={large}
        grow={1}
      />
      {showValueUpdateButton && (
        <TertiaryButton spacing="ml2" onClick={setValue}>
          Set amount to 123.45
        </TertiaryButton>
      )}
    </Box>
  );
};

export const Default = () => <Demo defaultValue={1000} />;
export const Large = () => <Demo defaultValue={500} large />;
export const WithoutValue = () => <Demo placeholder={1000} />;
export const ExternallyUpdatedValue = () => (
  <Demo defaultValue={500} showValueUpdateButton />
);

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker
    Component={CurrencyInput}
    label="Amount"
    currency="CAD"
    onChange={action('change')}
    value={256.32}
  />
);

export const MixinsStackee = () => (
  <StackeeChecker
    Component={CurrencyInput}
    label="Amount"
    currency="CAD"
    onChange={action('change')}
    value={256.32}
  />
);
