import React, { useState } from 'react';
import { select } from '@storybook/addon-knobs';
import { Stack } from '../Layout/index';
import Select from './index';

export default {
  title: 'Components|Select',
  component: Select,
};

export const SelectBox = () => {
  const [selectedItem, setSelectedItem] = useState('something 2');
  const appearance = select('Appearance', ['default', 'borderless'], 'default');
  return (
    <Stack>
      <Select
        value={selectedItem}
        disabled
        onChange={({ target }) => setSelectedItem(target.value)}
        appearance={appearance}
      >
        <option value="something 1" key="something 1">
          something
        </option>
        <option value="something 2" key="something 2">
          something 2
        </option>
      </Select>
      <Select
        width="400px"
        value={selectedItem}
        onChange={({ target }) => setSelectedItem(target.value)}
        appearance={appearance}
      >
        <option value="something 1" key="something 1">
          something 1
        </option>
        <option value="something 2" key="something 2">
          something 2
        </option>
      </Select>
      <Select width="600px" error appearance={appearance}>
        <option value="something 1" key="something 1">
          something 1
        </option>
      </Select>
      <Select height="30px" width="600px" appearance={appearance}>
        <option value="something 1" key="something 1">
          something 1
        </option>
      </Select>
    </Stack>
  );
};