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

import Button from '.';
import LegacyButton from './LegacyButton';

LegacyButton.displayName = 'Button';

const meta: Meta<typeof LegacyButton> = {
  component: LegacyButton,
  title: 'Actions/Button/Legacy Button/Tests',
  tags: ['!autodocs', '!manifest', 'deprecated'],
};

export default meta;

type Story = StoryObj<typeof Button>;

export const Focused: Story = {
  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.tab();
    await expect(button).toHaveFocus();
    await expect(button).toHaveTextContent('Focused!');
  },
  render: function Render(args: React.ComponentProps<typeof Button>) {
    const [focused, setFocused] = useState(false);

    return (
      <Button {...args} onFocus={() => setFocused(true)}>
        {focused ? 'Focused!' : 'Button text'}
      </Button>
    );
  },
};