import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {expect, test, vi} from 'vitest'
import {DynamicFormRenderer} from './DynamicFormRenderer'
import type {ServiceSchema} from '@/types/schema'

const schema: ServiceSchema = {
    cloud: 'aws',
    service: 'serverless',
    displayName: 'AWS Lambda',
    fields: [
        {
            name: 'runtime',
            label: 'Runtime',
            type: 'select',
            required: true,
            defaultValue: 'nodejs22.x',
            options: [
                {label: 'Node.js 22.x', value: 'nodejs22.x'},
                {label: 'Python 3.12', value: 'python3.12'},
            ],
        },
        {
            name: 'code',
            label: 'Hello World Source',
            type: 'textarea',
            required: false,
            defaultValueWhen: {
                field: 'runtime',
                values: {
                    'nodejs22.x': 'exports.handler = async () => {}',
                    'python3.12': 'def handler(event, context):\n    return {}',
                },
            },
        },
    ],
    actions: ['create'],
    filters: [],
    columns: [],
}

test('replaces Hello World source when the Lambda runtime changes', async () => {
    const user = userEvent.setup()
    render(<DynamicFormRenderer schema={schema} isSubmitting={false} onSubmit={vi.fn()}/>)

    expect(screen.getByLabelText('Hello World Source')).toHaveValue('exports.handler = async () => {}')
    await user.selectOptions(screen.getByRole('combobox'), 'python3.12')

    expect(screen.getByLabelText('Hello World Source')).toHaveValue('def handler(event, context):\n    return {}')
})

test('edits key-value fields as variable rows', async () => {
    const onSubmit = vi.fn()
    const user = userEvent.setup()
    render(<DynamicFormRenderer schema={{...schema, fields: [{name: 'environment', label: 'Environment Variables', type: 'key-value', required: false}]}} isSubmitting={false} onSubmit={onSubmit}/>)

    await user.click(screen.getByRole('button', {name: 'Add variable'}))
    await user.type(screen.getByLabelText('Environment Variables key 1'), 'APP_GREETING')
    await user.type(screen.getByLabelText('Environment Variables value 1'), 'Hello')
    await user.click(screen.getByRole('button', {name: 'Create'}))

    expect(onSubmit).toHaveBeenCalledWith({environment: '[{"key":"APP_GREETING","value":"Hello"}]'})
})

test('shows fields only when their visibility condition matches', async () => {
    const user = userEvent.setup()
    render(<DynamicFormRenderer schema={{
        ...schema,
        fields: [
            {name: 'kind', label: 'Kind', type: 'select', required: true, defaultValue: 'cluster', options: [{label: 'Cluster', value: 'cluster'}, {label: 'Service', value: 'service'}]},
            {name: 'clusterName', label: 'Cluster name', type: 'text', required: false, visibleWhen: {field: 'kind', values: ['cluster']}},
            {name: 'serviceName', label: 'Service name', type: 'text', required: false, visibleWhen: {field: 'kind', values: ['service']}},
        ],
    }} isSubmitting={false} onSubmit={vi.fn()}/>)

    expect(screen.getByLabelText('Cluster name')).toBeInTheDocument()
    expect(screen.queryByLabelText('Service name')).not.toBeInTheDocument()

    await user.selectOptions(screen.getByRole('combobox', {name: /Kind/}), 'service')

    expect(screen.queryByLabelText('Cluster name')).not.toBeInTheDocument()
    expect(screen.getByLabelText('Service name')).toBeInTheDocument()
})