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

import { InputNumber } from '../src';

storiesOf('InputNumber', module).add('Primary - Single', () => {
  function Parent({ children }) {
    const [value, setValue] = useState(0);
    const handleInputChange = (e) => {
      const formattedValue = !Number.isNaN(parseInt(e.target.value, 10))
        ? parseInt(e.target.value, 10)
        : null;

      setValue(formattedValue);
    };

    return <div>{children(value, setValue, handleInputChange)}</div>;
  }

  return (
    <Parent>
      {(value, setValue, handleInputChange) => (
        <InputNumber
          value={value}
          onChange={(e) => handleInputChange(e)}
          display="single"
        />
      )}
    </Parent>
  );
});

storiesOf('InputNumber', module).add('Multiple with custom style', () => {
  function Parent({ children }) {
    const [value, setValue] = useState(0);
    const [limitValues, setLimitValues] = useState<{
      minValue: number | object;
      maxValue: number | object;
    }>({
      minValue: 0,
      maxValue: 0,
    });
    const handleInputChange = (e, id: string) => {
      const formattedValue = !Number.isNaN(parseInt(e.target.value, 10))
        ? parseInt(e.target.value, 10)
        : null;

      if (formattedValue === null) {
        return;
      }

      if (id === 'min') {
        setLimitValues({ ...limitValues, ...{ minValue: formattedValue } });
      } else if (id === 'max') {
        setLimitValues({ ...limitValues, ...{ maxValue: formattedValue } });
      } else {
        setValue(formattedValue);
      }
    };

    return (
      <div>
        {children(
          value,
          setValue,
          limitValues,
          setLimitValues,
          handleInputChange
        )}
      </div>
    );
  }

  return (
    <Parent>
      {(value, setValue, limitValues, setLimitValues, handleInputChange) => (
        <InputNumber
          value={value}
          limitValues={limitValues}
          onChange={handleInputChange}
          display="multiple"
          height="35px"
          borderStyle="1px solid #a8b1c4"
          borderRadius="2px"
        />
      )}
    </Parent>
  );
});