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

import { CharCountMode, default as TextareaV2 } from './TextareaV2';

type PagePropsAndCustomArgs = React.ComponentProps<typeof TextareaV2>;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/TextareaV2',
  component: TextareaV2,
  argTypes: {
    maxLength: {
      control: {
        type: 'number',
      },
    },
    charCountMode: {
      control: {
        type: 'select',
        options: Object.keys(CharCountMode),
        mapping: CharCountMode,
      },
    },
    resize: {
      control: {
        type: 'boolean',
      },
    },
    rows: {
      control: {
        type: 'number',
      },
    },
    readOnly: {
      control: {
        type: 'boolean',
      },
    },
    className: {
      control: {
        type: 'text',
      },
    },
    textAreaClassName: {
      control: {
        type: 'text',
      },
    },
  },
};

export default meta;

function TextareaV2Demo(props: PagePropsAndCustomArgs) {
  const [value, setValue] = useState('');
  return (
    <TextareaV2
      {...props}
      value={props.value || value}
      onChange={(e) => setValue(e.currentTarget.value)}
    />
  );
}

export const Default: StoryObj<PagePropsAndCustomArgs> = {
  render: (args) => <TextareaV2Demo {...args} />,
  args: {
    placeholder:
      'A syncopated house song about an AI trapped in a music factory. Help!',
  },
};