import { StoryObj } from '@storybook/react';
import React, { useEffect, useRef, useState } from 'react';

import CommentInput from './CommentInput';

type PagePropsAndCustomArgs = React.ComponentProps<typeof CommentInput>;

export default {
  title: 'features/Comments/CommentInput',
  component: CommentInput,
};

function CommentInputDemo(props: PagePropsAndCustomArgs) {
  const [value, setValue] = useState('');
  const ref = useRef<HTMLTextAreaElement>(null);
  useEffect(() => {
    ref?.current?.focus();
  }, []);

  return (
    <CommentInput
      {...props}
      onSend={(val) => {
        console.log('sending', val);
        setValue('');
      }}
      value={value}
      onChange={(_e, nextValue) => setValue(nextValue)}
      ref={ref}
    />
  );
}

export const Default: StoryObj<PagePropsAndCustomArgs> = {
  render: (args) => <CommentInputDemo {...args} />,
  args: {
    placeholder: 'Write a comment',
    avatarSrc: 'something.jpeg',
    allowLineBreaks: false,
    allowWrapping: false,
    sendOnEnterKey: true,
  },
};