import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'

import WellPlate from '../../components/WellPlate.vue'

describe('WellPlate per-well decoration', () => {
  it('applies custom classes and lets custom styles override heatmap borders', () => {
    const wrapper = mount(WellPlate, {
      props: {
        format: 6,
        wells: {
          A1: { id: 'A1', row: 0, col: 0, state: 'filled', value: 0.5 },
        },
        heatmap: { enabled: true, min: 0, max: 1 },
        wellClass: well => well.id === 'A1' ? 'mint-well-plate__well--outlier' : undefined,
        wellStyle: well => well.id === 'A1'
          ? { borderWidth: '2px', borderStyle: 'solid', borderColor: 'var(--mint-warning)' }
          : undefined,
      },
    })

    const well = wrapper.findAll('.mint-well-plate__well')[0]
    expect(well.classes()).toContain('mint-well-plate__well--outlier')
    const style = (well.element as HTMLElement).style
    expect([style.borderWidth, style.borderStyle, style.borderColor])
      .toEqual(['2px', 'solid', 'var(--mint-warning)'])
  })

  it('should render no glyph when a QC well has no label or id', () => {
    const wrapper = mount(WellPlate, {
      props: {
        format: 6,
        wells: { A1: { id: 'A1', row: 0, col: 0, state: 'filled', sampleType: 'qc' } },
      },
    })

    expect(wrapper.findAll('.mint-well-plate__well')[0].text()).toBe('')
  })

  it('should draw plain legend swatches when the legend is shown', () => {
    const wrapper = mount(WellPlate, { props: { format: 6, showLegend: true } })

    const dots = wrapper.findAll('.mint-well-plate__sample-legend-dot')
    expect(dots.map(dot => dot.text())).toEqual(['', '', '', ''])
  })
})