import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { object } from '@storybook/addon-knobs';
import Button from '../../../components/ui/button';
import mockQuoteData from './mock-quote-data';
import SelectQuotePopover from '.';

export default {
  title: 'Pages/Swaps/SelectQuotePopover',
  id: __filename,
};

export const DefaultStory = () => {
  const [showPopover, setShowPopover] = useState(false);

  return (
    <div>
      <Button onClick={() => setShowPopover(true)}>Open Popover</Button>
      {showPopover && (
        <SelectQuotePopover
          quoteDataRows={object('quoteDataRows', mockQuoteData)}
          onClose={() => setShowPopover(false)}
          onSubmit={action('submit SelectQuotePopover')}
          swapToSymbol="DAI"
          initialAggId="Agg4"
        />
      )}
    </div>
  );
};

DefaultStory.storyName = 'Default';