import { useState } from 'react';
import { userEvent, within } from 'storybook/test';
import { Meta, StoryObj } from '@storybook/react-webpack5';

import { Field } from '../field/Field';
import { TextArea } from './TextArea';

const meta: Meta<typeof TextArea> = {
  title: 'Forms/TextArea/Tests',
  component: TextArea,
  tags: ['!autodocs', '!manifest'],
};

export default meta;
type Story = StoryObj<typeof TextArea>;

export const AsciiCharacters: Story = {
  name: 'counter at limit with ASCII input',
  render: () => {
    const [value, setValue] = useState('');

    return (
      <Field label="Message" required={false}>
        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
      </Field>
    );
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByRole('textbox'), '0123456789');
  },
};

export const EmojiCharacters: Story = {
  name: 'counter with emoji input',
  render: () => {
    const [value, setValue] = useState('');

    return (
      <Field label="Message" required={false}>
        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
      </Field>
    );
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const textarea = canvas.getByRole('textbox');
    await userEvent.click(textarea);
    await userEvent.paste('🐱💕🐱💕');
  },
};

export const EmojiAtLimit: Story = {
  name: 'truncates emoji paste exceeding limit',
  render: () => {
    const [value, setValue] = useState('');

    return (
      <Field label="Message" required={false}>
        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
      </Field>
    );
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const textarea = canvas.getByRole('textbox');
    await userEvent.click(textarea);
    await userEvent.paste('🐱💕🐱💕🐱💕🐱💕🐱💕🐱💕🐱💕');
  },
};

export const CJKCharacters: Story = {
  name: 'truncates CJK paste exceeding limit',
  render: () => {
    const [value, setValue] = useState('');

    return (
      <Field label="Message" required={false}>
        <TextArea maxLength={10} value={value} onChange={({ target }) => setValue(target.value)} />
      </Field>
    );
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const textarea = canvas.getByRole('textbox');
    await userEvent.click(textarea);
    await userEvent.paste('吉𣘺吉𣘺吉𣘺吉𣘺吉𣘺吉𣘺');
  },
};

export const InitialValueExceedsLimit: Story = {
  name: 'initial value exceeding maxLength is preserved',
  render: () => {
    const [value, setValue] = useState('Hello World!');

    return (
      <Field label="Message" required={false}>
        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
      </Field>
    );
  },
};

export const EmojiTypingBlocked: Story = {
  name: 'blocks emoji paste when already at limit',
  render: () => {
    const [value, setValue] = useState('');

    return (
      <Field label="Message" required={false}>
        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
      </Field>
    );
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const textarea = canvas.getByRole('textbox');
    await userEvent.click(textarea);
    await userEvent.paste('🐱💕');
    await userEvent.paste('🎉🎉🎉');
  },
};

export const CJKTypingBlocked: Story = {
  name: 'blocks CJK paste when already at limit',
  render: () => {
    const [value, setValue] = useState('');

    return (
      <Field label="Message" required={false}>
        <TextArea maxLength={3} value={value} onChange={({ target }) => setValue(target.value)} />
      </Field>
    );
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const textarea = canvas.getByRole('textbox');
    await userEvent.click(textarea);
    await userEvent.paste('吉𣘺');
    await userEvent.paste('吉𣘺吉𣘺吉𣘺');
  },
};
