/*
 * 「도면 크기와 단위」 (ADR-0144 2.4): the drawing's real size shown and typed in its display unit, stored as the scale and
 * coordinates; a drawing whose scale is unknown says so and is fitted to a real length without a coordinate moving.
 */
import { html } from 'lit'
import { fixture, expect, oneEvent } from '@open-wc/testing'

import { PropertyShapes } from '../src/property-panel/shapes/shapes.js'

customElements.define('drawing-size-under-test', class extends PropertyShapes {})

const root = { isRootModel: () => true, isLayer: () => true }

async function panel(value: Record<string, unknown>, bounds = { left: 0, top: 0, width: 6000, height: 4000 }) {
  return fixture<PropertyShapes>(html`<drawing-size-under-test .value=${value} .bounds=${bounds} .selected=${[root]}></drawing-size-under-test>`)
}
const field = (el: PropertyShapes, attr: string) => el.shadowRoot!.querySelector(`input[${attr}]`) as HTMLInputElement | null
const type = (input: HTMLInputElement, value: string) => {
  input.value = value
  input.dispatchEvent(new Event('change', { bubbles: true, composed: true }))
}

describe('the drawing size and unit (ADR-0144)', () => {
  it('a drawing with a scale shows its real size and ceiling in its display unit', async () => {
    const el = await panel({ mmPerUnit: 10, displayUnit: 'm', heights: { ceiling: 3000 } })
    expect([field(el, 'drawing-width')!.value, field(el, 'drawing-depth')!.value, field(el, 'drawing-ceiling')!.value]).to.deep.equal(['60', '40', '3'])
    expect(el.shadowRoot!.querySelector('[scale-unknown]')).to.equal(null)
  })

  it('a real width typed sets the width in coordinates through the scale', async () => {
    const el = await panel({ mmPerUnit: 10, displayUnit: 'm' })
    setTimeout(() => type(field(el, 'drawing-width')!, '70'))
    const { detail } = await oneEvent(el, 'bounds-change')
    expect(detail).to.deep.equal({ width: 7000 })
  })

  it('a ceiling typed is kept as a real length, in mm', async () => {
    const el = await panel({ mmPerUnit: 10, displayUnit: 'm', heights: { floor: 0, ceiling: 3000 } })
    setTimeout(() => type(field(el, 'drawing-ceiling')!, '4.5'))
    const { detail } = await oneEvent(el, 'property-change')
    expect(detail).to.deep.equal({ heights: { floor: 0, ceiling: 4500 } })
  })

  it('a drawing whose scale is unknown says so, and the real length of its width sets the scale', async () => {
    const el = await panel({ displayUnit: 'm' })
    expect(el.shadowRoot!.querySelector('[scale-unknown]')).to.not.equal(null)
    expect(field(el, 'drawing-width')).to.equal(null)
    ;(el.shadowRoot!.querySelector('button[calibrate]') as HTMLButtonElement).click()
    await el.updateComplete
    setTimeout(() => type(field(el, 'calibrate-length')!, '60'))
    const { detail } = await oneEvent(el, 'property-change')
    expect(detail).to.deep.equal({ mmPerUnit: 10 })
  })
})