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

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

export default {
  title: 'Toaster',
  component: Toaster,
};

const Template = (args) => <Toaster {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  text: 'Modifications enregistrées',
};

export const Error = Template.bind({});
Error.args = {
  text: 'Network error',
  status: 'error',
};

storiesOf("Toaster", module).add("AutoDismiss", () => {
  function Parent({ children }) {
    const [state, setState] = useState({
      hidden: false,
    });

    return <div>{children(state, setState)}</div>;
  }

  return (
    <Parent>
      {(state, setState) => (
        <Toaster
          text={'Auto dismiss in progress...'}
          autoDelete={true}
          hidden={state.hidden}
          handleClose={() => {
            setState({
              hidden: true,
            })
          }}
        />
      )}
    </Parent>
  );
});