import { Meta, Story } from '@storybook/react';
import React from 'react';
import styled from 'styled-components';
import { RPGUIRoot } from '../../..';
import {
  Dropdown,
  IDropdownProps,
  IOptionsProps,
} from '../../../components/Dropdown';

const meta: Meta = {
  title: 'UI/Dropdowns & Selectors/Dropdown',
  component: Dropdown,
};

export default meta;

const Template: Story<IDropdownProps> = args => (
  <RPGUIRoot>
    <PushUp>
      <Dropdown {...args} />
    </PushUp>
  </RPGUIRoot>
);

const PushUp = styled.div`
  margin-top: 200px;
`;

export const Default = Template.bind({});

const options: IOptionsProps[] = [
  {
    id: 1,
    value: 'Human',
    option: 'Human',
  },
  {
    id: 2,
    value: 'Elfo',
    option: 'Elfo',
  },
  {
    id: 3,
    value: 'Dragão',
    option: 'Dragão',
  },
];

Default.args = {
  options,
  width: '100%',
  opensUp: false,
};
