import {fireEvent, render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {describe, expect, test, vi} from 'vitest'
import {WorkflowCreatePanel} from './WorkflowCreatePanel'

function renderPanel(onSubmit = vi.fn()) {
    render(<WorkflowCreatePanel isSubmitting={false} submitError={null} onCancel={vi.fn()} onSubmit={onSubmit}/>)
    return onSubmit
}

describe('WorkflowCreatePanel', () => {
    test('offers explicit Studio and ASL creation modes', () => {
        renderPanel()

        expect(screen.getByRole('button', {name: /workflow studio/i})).toHaveAttribute('aria-pressed', 'true')
        expect(screen.getByRole('button', {name: /asl definition/i})).toHaveAttribute('aria-pressed', 'false')
        expect(screen.queryByLabelText(/asl definition/i)).not.toBeInTheDocument()
    })

    test('submits a name-only Studio creation targeting Studio', async () => {
        const user = userEvent.setup()
        const onSubmit = renderPanel()

        await user.type(screen.getByLabelText(/state machine name/i), ' orders ')
        await user.click(screen.getByRole('button', {name: /create and open studio/i}))

        expect(onSubmit).toHaveBeenCalledWith({values: {name: 'orders'}, destination: 'studio'})
    })

    test('submits the exact ASL text targeting Explorer', async () => {
        const user = userEvent.setup()
        const onSubmit = renderPanel()
        const definition = '  {\n  "StartAt": "Done",\n  "States": {"Done": {"Type": "Succeed"}}\n}\n'

        await user.click(screen.getByRole('button', {name: /asl definition/i}))
        await user.type(screen.getByLabelText(/state machine name/i), 'orders')
        fireEvent.change(screen.getByLabelText(/asl definition/i), {target: {value: definition}})
        await user.click(screen.getByRole('button', {name: /create state machine/i}))

        expect(onSubmit).toHaveBeenCalledWith({values: {name: 'orders', definition}, destination: 'explorer'})
    })

    test.each([
        ['', 'ASL definition is required.'],
        ['not json', 'ASL definition must be valid JSON.'],
        ['[]', 'ASL definition must be a JSON object.'],
        ['{"StartAt":1,"States":{}}', 'ASL definition must include StartAt as a string.'],
        ['{"StartAt":"Done","States":[]}', 'ASL definition must include States as an object.'],
    ])('rejects invalid ASL definition %s', async (definition, message) => {
        const user = userEvent.setup()
        const onSubmit = renderPanel()

        await user.click(screen.getByRole('button', {name: /asl definition/i}))
        await user.type(screen.getByLabelText(/state machine name/i), 'orders')
        if (definition) fireEvent.change(screen.getByLabelText(/asl definition/i), {target: {value: definition}})
        await user.click(screen.getByRole('button', {name: /create state machine/i}))

        expect(screen.getByRole('alert')).toHaveTextContent(message)
        expect(onSubmit).not.toHaveBeenCalled()
    })
})