import { expect, userEvent, within } from '@storybook/test';

import AdminImageManager from './AdminImageManager.vue';

const images = [
  { id: 'image-1', label: 'FRONT', altText: 'Front of card', sortOrder: 0, isPrimary: true, processingStatus: 'COMPLETED' },
  { id: 'image-2', label: 'BACK', altText: 'Back of card', sortOrder: 1, isPrimary: false, processingStatus: 'COMPLETED' },
];

const failedImages = [
  { id: 'image-1', label: 'FRONT', altText: 'Front of card', sortOrder: 0, isPrimary: true, processingStatus: 'COMPLETED' },
  { id: 'image-2', label: 'BACK', altText: 'Back of card', sortOrder: 1, isPrimary: false, processingStatus: 'FAILED' },
];

const processingImages = [
  { id: 'image-1', label: 'FRONT', altText: 'Front of card', sortOrder: 0, isPrimary: true, processingStatus: 'PROCESSING' },
];

export default { title: 'Organisms/AdminImageManager', component: AdminImageManager };

export const Completed = { args: { images } };
export const EmptyUpload = { args: { images: [] } };
export const Processing = { args: { images: processingImages } };
export const Failed = { args: { images: failedImages } };
export const Saving = { args: { images, isSaving: true } };

export const EditAltTextWithKeyboard = {
  args: { images },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getAllByRole('button', { name: 'Edit alt text' })[0]);
    const input = canvas.getAllByLabelText('Alt text')[0];
    await userEvent.clear(input);
    await userEvent.type(input, 'Updated front image');
    await userEvent.click(canvas.getByRole('button', { name: 'Save alt text' }));
    await expect(canvas.getByDisplayValue('Updated front image')).toBeInTheDocument();
  },
};

export const RetryFailedImage = {
  args: { images: failedImages },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await expect(canvas.getByRole('button', { name: 'Retry processing' })).toBeInTheDocument();
  },
};

export const DisabledAfterRefreshFailure = {
  args: { images, disabled: true },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await expect(canvas.getByLabelText('Add images')).toBeDisabled();
    for (const button of canvas.getAllByRole('button', { name: /Edit alt text|Make primary|Move up|Move down|Delete image/ })) {
      await expect(button).toBeDisabled();
    }
  },
};