import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
import {render, screen, within} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {beforeEach, expect, test, vi} from 'vitest'
import {CloudFrontPanel} from './CloudFrontPanel'
import type {CloudResource} from '@/types/resource'

const api = vi.hoisted(() => ({
    getCloudResource: vi.fn(),
    setDistributionEnabled: vi.fn(),
    createDistributionInvalidation: vi.fn(),
}))

vi.mock('@/api/cloudProxyClient', () => api)
vi.mock('@/lib/accountStore', () => ({useAccountId: () => '000000000000'}))

const VIEWER_URL = 'http://e7cpm0p0g0vc8d.cloudfront.localhost:4566/'
const distribution: CloudResource = {
    id: 'E7CPM0P0G0VC8D', name: 'e7cpm0p0g0vc8d.cloudfront.net', cloud: 'aws', service: 'cdn', type: 'distribution',
    region: null, createdAt: null, status: 'Deployed',
    metadata: {
        viewerUrl: VIEWER_URL, domainName: 'e7cpm0p0g0vc8d.cloudfront.net', enabled: true, defaultRootObject: 'index.html',
        origins: [{id: 's3-site', domainName: 'site.s3.amazonaws.com', kind: 's3', protocol: null}],
        behaviors: [{pathPattern: 'Default (*)', originId: 's3-site', viewerProtocol: 'redirect-to-https', methods: ['GET', 'HEAD']}],
        invalidations: [{id: 'I1', status: 'Completed', createdAt: null, paths: []}],
    },
}

function renderPanel() {
    const client = new QueryClient({defaultOptions: {queries: {retry: false}}})
    return render(<QueryClientProvider client={client}><CloudFrontPanel resource={distribution} runtimeReachable/></QueryClientProvider>)
}

beforeEach(() => {
    vi.clearAllMocks()
    api.getCloudResource.mockResolvedValue(distribution)
    api.setDistributionEnabled.mockImplementation(async (_cloud, _id, enabled) => ({...distribution, metadata: {...distribution.metadata, enabled}}))
    api.createDistributionInvalidation.mockImplementation(async (_cloud, _id, paths) => ({id: 'I2', status: 'Completed', createdAt: null, paths}))
})

test('opens the distribution locally and shows its origins and behaviours', async () => {
    renderPanel()

    expect(await screen.findByRole('link', {name: /Open/})).toHaveAttribute('href', VIEWER_URL)
    expect(screen.getByText('site.s3.amazonaws.com')).toBeInTheDocument()
    expect(screen.getByText('Redirect to HTTPS')).toBeInTheDocument()
    expect(screen.getByText('I1')).toBeInTheDocument()
})

test('disables the distribution', async () => {
    const user = userEvent.setup()
    renderPanel()

    await user.click(await screen.findByRole('button', {name: 'Disable'}))
    expect(api.setDistributionEnabled).toHaveBeenCalledWith('aws', distribution.id, false)
    expect(await screen.findByText(/Distribution disabled/)).toBeInTheDocument()
})

test('invalidates the paths entered, one per line', async () => {
    const user = userEvent.setup()
    renderPanel()

    const form = await screen.findByRole('form', {name: 'Create invalidation'})
    const field = within(form).getByLabelText(/Paths/)
    await user.clear(field)
    await user.type(field, '/index.html{enter}/assets/*')
    await user.click(within(form).getByRole('button', {name: 'Create invalidation'}))

    expect(api.createDistributionInvalidation).toHaveBeenCalledWith('aws', distribution.id, ['/index.html', '/assets/*'])
    expect(await screen.findByText(/Invalidation I2 completed for \/index.html, \/assets\/\*/)).toBeInTheDocument()
})