import React, { useCallback } from 'react';
import { Meta, StoryFn } from "@storybook/react-webpack5";
import { useArgs, useState } from 'storybook/preview-api';
import Select from '@atoms/Select/Select';
import { SelectProps } from '@atoms/Select/Select';
export default {
  title: 'atoms/Select',
  component: Select,
  argTypes: {},
} as Meta<typeof Select>;

const data = [
  {
    id: '1',
    name: 'item 1'
  },
  {
    id: '2',
    name: 'item 2'
  },
  {
    id: '3',
    name: 'item 3'
  },
  {
    id: '4',
    name: 'item 4'
  },
  {
    id: '5',
    name: 'item 5',
    disabled: true
  },
];

const Template: StoryFn<SelectProps> = ({value, onChange, ...args}) => {
  const [_, updateArgs] = useArgs();
  const [internalValue, setInternalValue] = useState(value);

  const handleChange = useCallback((newValue: string) => {
    setInternalValue(newValue);
    updateArgs({ value: newValue });
  }, [])

  return <React.Fragment>
    <Select {...args} value={internalValue} onChange={handleChange} />
    <div>value: {value}</div>
  </React.Fragment>;
};

export const _Select = Template.bind({});
_Select.args = {
  data,
  value: '1',
  disabled: false,
};