import { StoryFn } from '@storybook/react-webpack5';
import { expect, userEvent, within } from 'storybook/test';
import { action } from 'storybook/actions';
import { useState } from 'react';

import DateLookup, { type DateLookupProps } from './DateLookup';

export default {
  component: DateLookup,
  title: 'Forms/DateLookup/Tests',
  tags: ['!manifest'],
};

const props: DateLookupProps = {
  value: new Date(1987, 0, 10, 12, 0, 0),
  onChange: (value: Date | null) => {
    action(value?.toString() || 'null');
  },
};
type Story = StoryFn<typeof DateLookup>;

const Template: Story = (args: DateLookupProps) => {
  const { value: initialValue } = args;
  const [value, setValue] = useState<Date | null>(initialValue);

  return (
    <DateLookup
      {...args}
      value={value}
      clearable
      placeholder="placeholder"
      onChange={(v) => {
        setValue(v);
      }}
    />
  );
};

export const ClearSpace = Template.bind({});
ClearSpace.args = { ...props };
ClearSpace.play = async ({ canvasElement, step }) => {
  const canvas = within(canvasElement);

  await step('space can activate clear button', async () => {
    // focus on clear button
    const date = await canvas.findByText('January 10, 1987');
    await expect(date).toBeInTheDocument();
    await userEvent.tab();
    await userEvent.tab();

    // clear with space
    await userEvent.keyboard(' ');
    const placeholder = canvas.getByText('placeholder');
    await expect(placeholder).toBeInTheDocument();
  });
};

export const ClearEnter = Template.bind({});
ClearEnter.args = { ...props };
ClearEnter.play = async ({ canvasElement, step }) => {
  const canvas = within(canvasElement);

  await step('enter can activate clear button', async () => {
    // focus on clear button
    const date = await canvas.findByText('January 10, 1987');
    await expect(date).toBeInTheDocument();
    await userEvent.tab();
    await userEvent.tab();

    // clear with space
    await userEvent.keyboard('{enter}');
    const placeholder = canvas.getByText('placeholder');
    await expect(placeholder).toBeInTheDocument();
  });
};

export const FocusOnSelectedDay = Template.bind({});
FocusOnSelectedDay.args = { ...props };
FocusOnSelectedDay.play = async () => {
  await userEvent.tab();
  await userEvent.keyboard(' ');
};

export const FocusOnToday = Template.bind({});
FocusOnToday.args = { ...props, value: null };
FocusOnToday.play = async () => {
  await userEvent.tab();
  await userEvent.keyboard(' ');
};

export const FocusOnFirstNonDisabledDate = Template.bind({});
FocusOnFirstNonDisabledDate.args = {
  ...props,
  value: null,
  min: new Date(1987, 0, 10, 12, 0, 0),
  max: new Date(1987, 0, 12, 12, 0, 0),
};
FocusOnFirstNonDisabledDate.play = async () => {
  await userEvent.tab();
  await userEvent.keyboard(' ');
};
