import { afterEach, beforeAll, describe, expect, it } from 'vitest'
import { labelsFor } from '../../assets/src/elements/labels'
import { parseParent } from '../../assets/src/elements/parent'

// golem15-seo-parent (P33-23, D-86): the primary category select. The
// first-render case is in schema.test.ts.

beforeAll(async () => {
  await import('../../assets/src/elements/index')
})

afterEach(() => {
  document.body.replaceChildren()
})

function mount(value: unknown, attrs: Record<string, string> = {}): HTMLElement & { value: unknown } {
  const node = document.createElement('golem15-seo-parent') as HTMLElement & { value: unknown }
  node.setAttribute('ui-locale', 'en')
  for (const [k, v] of Object.entries(attrs)) {
    node.setAttribute(k, v)
  }
  node.value = value
  document.body.append(node)
  return node
}

describe('parseParent', () => {
  it('reads the loaded object, a plain stored choice and junk', () => {
    expect(parseParent('cat:1')).toEqual({ selected: 'cat:1', options: [] })
    expect(parseParent({ selected: 'cat:2', options: [{ value: 'cat:2', label: '' }, { value: 'cat:3', label: 'Three' }, { label: 'no value' }, null, 'x'] })).toEqual({
      selected: 'cat:2',
      options: [
        { value: 'cat:2', label: 'cat:2' },
        { value: 'cat:3', label: 'Three' },
      ],
    })
    expect(parseParent({ selected: 5, options: 'nope' })).toEqual({ selected: '', options: [] })
    expect(parseParent(null)).toEqual({ selected: '', options: [] })
  })
})

describe('golem15-seo-parent', () => {
  it('starts on the empty default option when nothing is stored', () => {
    const node = mount({ selected: '', options: [{ value: 'cat:1', label: 'Recipes' }] })
    const select = node.querySelector('select')!
    expect(select.options[0]!.value).toBe('')
    expect(select.options[0]!.textContent).toBe(labelsFor('en').primaryDefault)
    expect(select.value).toBe('')
    expect(node.value).toBe('')
  })

  it('keeps its options when the stored choice is set as a string', () => {
    const node = mount({ selected: '', options: [{ value: 'cat:1', label: 'Recipes' }, { value: 'cat:2', label: 'Mushrooms' }] })
    node.value = 'cat:2'
    expect(node.value).toBe('cat:2')
    expect(node.querySelector('select')!.value).toBe('cat:2')
    expect(node.querySelectorAll('option')).toHaveLength(3)
  })

  it('disables the select with the disabled attribute and speaks Polish with ui-locale pl', () => {
    const node = mount({ selected: '', options: [] }, { disabled: '' })
    expect(node.querySelector('select')!.disabled).toBe(true)
    node.setAttribute('ui-locale', 'pl')
    expect(node.querySelector('option')!.textContent).toBe(labelsFor('pl').primaryDefault)
  })
})