import { html, fixture, assert, oneEvent } from '@open-wc/testing'
import { IBasicAuthorization, IRequestAuthorization, RequestAuthorization } from '@api-client/core/browser.js'
import { Authorization } from '../../../src/elements/authorization/ui/Authorization.js'
import Input from '../../../src/md/input/Input.js'
import '../../../src/define/authorization/basic-authorization.js'

describe('Basic method', () => {
  const usernameSelector = 'ui-filled-text-field[name="username"]'
  const passwordSelector = 'ui-filled-text-field[name="password"]'

  const username = 'test-username'
  const password = 'test-password'

  async function basicFixture(auth?: IRequestAuthorization): Promise<Authorization> {
    return fixture(html`<basic-authorization .authorization="${auth}"></basic-authorization>`)
  }

  describe('DOM rendering', () => {
    let element: Authorization
    let form: HTMLFormElement

    beforeEach(async () => {
      const auth = RequestAuthorization.fromTypedConfig('basic', {}).toJSON()
      element = await basicFixture(auth)
      form = element.shadowRoot!.querySelector('form')!
    })

    it('has the form in the DOM', async () => {
      assert.ok(form)
    })

    it('has form has autocomplete', async () => {
      assert.equal(form.getAttribute('autocomplete'), 'on')
    })

    it('form has username input', async () => {
      const input = form.querySelector(usernameSelector) as Input
      assert.ok(input)
    })

    it('username is required', async () => {
      const input = form.querySelector(usernameSelector) as Input
      assert.isTrue(input.required)
    })

    it('username has invalid label', async () => {
      const input = form.querySelector(usernameSelector) as Input
      assert.equal(input.invalidText, 'Username is required')
    })

    it('form has password input', async () => {
      const input = form.querySelector(passwordSelector) as Input
      assert.ok(input)
    })

    it('has no other inputs', () => {
      const controls = form.querySelectorAll('ui-filled-text-field')
      assert.lengthOf(controls, 2)
    })
  })

  describe('change notification', () => {
    let element: Authorization
    beforeEach(async () => {
      const auth = RequestAuthorization.fromTypedConfig('basic', {}).toJSON()
      element = await basicFixture(auth)
    })

    it('notifies when username changes', async () => {
      const input = element.shadowRoot!.querySelector(usernameSelector) as Input
      setTimeout(() => {
        input.value = 'test'
        input.dispatchEvent(new Event('change'))
      })
      const e = await oneEvent(element, 'change')
      assert.ok(e)
    })

    it('notifies when password changes', async () => {
      const input = element.shadowRoot!.querySelector(passwordSelector) as Input
      setTimeout(() => {
        input.value = 'test-password'
        input.dispatchEvent(new Event('change'))
      })
      const e = await oneEvent(element, 'change')
      assert.ok(e)
    })
  })

  describe('updating the model', () => {
    let element: Authorization
    beforeEach(async () => {
      const auth = RequestAuthorization.fromTypedConfig('basic', {
        username,
        password,
      }).toJSON()
      element = await basicFixture(auth)
    })

    it('updates the username from user input', () => {
      const input = element.shadowRoot!.querySelector(usernameSelector) as Input
      input.value = 'test'
      input.dispatchEvent(new Event('change'))
      const config = element.authorization!.config as IBasicAuthorization
      assert.equal(config.username, 'test')
    })

    it('notifies when password changes', () => {
      const input = element.shadowRoot!.querySelector(passwordSelector) as Input
      input.value = 'password'
      input.dispatchEvent(new Event('change'))
      const config = element.authorization!.config as IBasicAuthorization
      assert.equal(config.password, 'password')
    })
  })

  describe('data restoration', () => {
    let element: Authorization
    beforeEach(async () => {
      const auth = RequestAuthorization.fromTypedConfig('basic', {
        username,
        password,
      }).toJSON()
      element = await basicFixture(auth)
    })

    it('has the value on the username filed', () => {
      const input = element.shadowRoot!.querySelector(usernameSelector) as Input
      assert.equal(input.value, username)
    })

    it('has the value on the password filed', () => {
      const input = element.shadowRoot!.querySelector(passwordSelector) as Input
      assert.equal(input.value, password)
    })
  })

  describe('validation', () => {
    let element: Authorization
    beforeEach(async () => {
      const auth = RequestAuthorization.fromTypedConfig('basic', {}).toJSON()
      element = await basicFixture(auth)
    })

    it('is not valid without the username', () => {
      const result = element.checkValidity()
      assert.isFalse(result)
    })

    it('is valid with the username', async () => {
      ;(element.authorization!.config as IBasicAuthorization).username = 'test-username'
      element.requestUpdate()
      await element.updateComplete
      const result = element.checkValidity()
      assert.isTrue(result)
    })
  })

  describe('a11y', () => {
    it('is accessible without the model', async () => {
      const element = await basicFixture()
      await assert.isAccessible(element)
    })

    it('is accessible when empty', async () => {
      const auth = RequestAuthorization.fromTypedConfig('basic', {}).toJSON()
      const element = await basicFixture(auth)
      await assert.isAccessible(element)
    })

    it('is accessible with values', async () => {
      const auth = RequestAuthorization.fromTypedConfig('basic', { username, password }).toJSON()
      const element = await basicFixture(auth)
      await assert.isAccessible(element)
    })
  })
})
