
import { newE2EPage } from '@stencil/core/testing'
import faker from 'faker'

function randomNumber(min, max, width = 0) {
    let n = faker.random.number({ min, max }) + ''
    return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n
}

function getMockHistoryItems(numberOfItems) {
    let historyItems = []
    
    for (let i = 0; i < numberOfItems; i++) {
        historyItems.push({
            "url": faker.internet.url(),
            "label": faker.lorem.words(5),
            "serviceType": faker.helpers.randomize(['data', 'doc']),
            "tags": faker.lorem.words(5).split(' '),
            "favorite": faker.random.boolean(),
            "application": "GES DISC Website",
            "uid": "jdoe",
            "created": `2020-${randomNumber(1, 12, 2)}-${randomNumber(1, 28, 2)}T${randomNumber(1, 20, 2)}:${randomNumber(1, 59, 2)}:19.614Z`,
            "id": "foo",
        })
    }

    return historyItems
}

describe('gd-user-dashboard', () => {
    let page, component

    beforeEach(async () => {
        page = await newE2EPage()

        await page.setContent(`
            <gd-user-dashboard></gd-user-dashboard>
        `)

        component = await page.find('gd-user-dashboard')
    })

    it('renders', async () => {
        expect(component).toHaveClass('hydrated')
    })

    it('should default to site history', async () => {
        const activeTab = await page.$eval('gd-user-dashboard', (dashboard: any) => {
            const tabs = dashboard.shadowRoot.querySelectorAll('bs-nav-item')
            const activeTabs: any = Array.from(tabs).filter((tab: any) => tab.active)

            return activeTabs.length > 1 ? 'Found multiple active tabs' : activeTabs?.[0]?.innerText
        })

        expect(activeTab).toEqual('Site History')
    })

    it('with no items, should show loading', async () => {
        expect(await page.find('gd-user-dashboard >>> .loading')).not.toBe(null)
    })

    it('should render items when passed items prop updated', async () => {
        const historyItems = getMockHistoryItems(5)

        await page.$eval('gd-user-dashboard', (el: any, historyItems) => {
            el.items = historyItems
        }, historyItems)

        await page.waitForChanges()

        const renderedItems = await page.findAll('gd-user-dashboard >>> gd-user-dashboard-list-item')

        expect(renderedItems.length).toBe(historyItems.length)
    })

    it('should trigger activeListChanged event when favorites tab clicked', async () => {
        const eventSpy = await component.spyOnEvent('activeListChanged')

        // click on favorites tab (in this case just using the first tab since it's an easier selector)
        // if the favorites tab position changes this test will need to be updated :)
        const firstTab = await page.find('gd-user-dashboard >>> bs-nav-item')
        await firstTab.click()

        await page.waitForChanges()

        expect(eventSpy).toHaveReceivedEvent()
        expect(eventSpy).toHaveReceivedEventDetail('favorites')
    })

    it('should be able to change the active list by using the setActiveList method', async () => {
        const eventSpy = await component.spyOnEvent('activeListChanged')

        await component.callMethod('setActiveList', 'favorites')
        await page.waitForChanges()

        expect(eventSpy).toHaveReceivedEvent()
        expect(eventSpy).toHaveReceivedEventDetail('favorites')

        // switch it again just to be doubly sure :)
        await component.callMethod('setActiveList', 'history')
        await page.waitForChanges()

        expect(eventSpy).toHaveReceivedEvent()
        expect(eventSpy).toHaveReceivedEventDetail('history')
    })
})
