import React, { useCallback } from 'react';
import { Meta, StoryFn } from "@storybook/react-webpack5";
import { useArgs, useState } from "storybook/preview-api";
import TextField, { TextFieldProps } from './TextField';

export default {
  title: 'atoms/TextField',
  component: TextField,
  argTypes: {},
} as Meta<typeof TextField>;

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

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

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

export const _TextField = Template.bind({});
_TextField.args = {};