import type { Meta, StoryObj } from '@storybook/react-webpack5';
import { within, fireEvent } from 'storybook/test';
import { allModes } from '../../.storybook/modes';
import { lorem500 } from '../test-utils';
import { Field } from '../field/Field';
import Body from '../body';
import MoneyInput from './MoneyInput';

const meta = {
  title: 'Forms/MoneyInput/Tests',
  component: MoneyInput,
  args: {
    amount: 1000,
    id: 'moneyInput',
    currencies: [
      {
        value: 'EUR',
        label: 'EUR',
        note: 'Euro',
        currency: 'eur',
        searchable: 'Spain, Germany, France, Austria',
      },
      {
        value: 'GBP',
        label: 'GBP',
        note: 'British pound',
        currency: 'gbp',
        searchable: 'England, Scotland, Wales',
      },
    ],
    selectedCurrency: {
      value: 'EUR',
      label: 'EUR',
      note: 'Euro',
      currency: 'eur',
      searchable: 'Spain, Germany, France, Austria',
    },
    searchPlaceholder: '',
    onAmountChange: () => {},
    onCurrencyChange: () => {},
  },
  tags: ['!autodocs'],
} satisfies Meta<typeof MoneyInput>;
export default meta;

type Story = StoryObj<typeof MoneyInput>;

const wait = async (duration = 500) =>
  new Promise<void>((resolve) => {
    setTimeout(resolve, duration);
  });

/**
 * This test ensures that when the SelectInput is used within a scrollable page,
 * opening the dropdown does not cause any unwanted scrolling or layout shifts.
 * Expected preview should start with green bar at the top, with yellow section
 * not in the viewport. The issue is particularly prominent on iOS Safari.
 *
 * NB: This test is disabled in Chromatic as there's no obvious way to control
 * <html/> element of a snapshot. It's to be primarily used in manual testing
 * on an actual device or a simulator as it cannot be reproduced with mobile
 * emulation modes on desktop browsers.
 */
export const SmoothScrollReset: Story = {
  decorators: [
    (Story) => (
      <>
        <style>{`html { scroll-behavior: smooth; }`}</style>
        <div>
          <div
            className="d-flex align-items-center justify-content-center"
            style={{
              backgroundColor: 'var(--color-bright-yellow)',
              height: 400,
            }}
          >
            This block should not be in the viewport.
          </div>
          <div style={{ height: 10, backgroundColor: 'var(--color-bright-green)' }} />
          <Field id="el1" label="Select currency">
            <Story />
          </Field>
          <Body as="p">{lorem500}</Body>
        </div>
      </>
    ),
  ],
  play: async ({ canvasElement }) => {
    await wait();
    document.documentElement.scrollTop = 400;
    await wait();
    const canvas = within(canvasElement);
    // cannot use userEvent.click as it crashes on iOS Safari in the simulator
    await fireEvent.click(canvas.getByRole('combobox'));
  },
  globals: {
    viewport: { value: allModes.largeMobile.viewport, isRotated: false },
  },
  parameters: {
    chromatic: {
      disableSnapshot: true,
    },
  },
};
