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

const stops = [
  { value: 0, color: '#3b82f6' },
  { value: 100, color: '#ef4444' },
]

describe('BaseSlider', () => {
  describe('without the color options', () => {
    it('should render the primary fill when no color stops are passed', () => {
      const wrapper = mount(BaseSlider, { props: { modelValue: 40 } })

      expect(wrapper.find('.mint-slider__fill').exists()).toBe(true)
    })

    it('should leave the track without an inline background when no color stops are passed', () => {
      const wrapper = mount(BaseSlider, { props: { modelValue: 40 } })

      expect(wrapper.get('.mint-slider__track').attributes('style')).not.toContain('background')
    })

    it('should render the value as plain text when no thresholds are passed', () => {
      const wrapper = mount(BaseSlider, { props: { modelValue: 40 } })

      expect(wrapper.get('.mint-slider__value').classes()).toEqual(['mint-slider__value'])
    })

    it('should not render range labels when showLabels is not set', () => {
      const wrapper = mount(BaseSlider, { props: { modelValue: 40 } })

      expect(wrapper.find('.mint-slider__labels').exists()).toBe(false)
    })
  })

  describe('colorStops', () => {
    it('should paint the track with a gradient built from the stops', () => {
      const wrapper = mount(BaseSlider, { props: { modelValue: 40, colorStops: stops } })

      expect(wrapper.get('.mint-slider__track').attributes('style')).toContain(
        'linear-gradient(to right, #3b82f6 0%, #ef4444 100%)',
      )
    })

    it('should drop the primary fill so the gradient stays visible', () => {
      const wrapper = mount(BaseSlider, { props: { modelValue: 40, colorStops: stops } })

      expect(wrapper.find('.mint-slider__fill').exists()).toBe(false)
    })
  })

  describe('thresholds', () => {
    it.each([
      [10, 'success'],
      [30, 'warning'],
      [31, 'error'],
    ])('should tone the value badge %s%% as %s for thresholds [10, 30]', (value, tone) => {
      const wrapper = mount(BaseSlider, { props: { modelValue: value, thresholds: [10, 30] } })

      expect(wrapper.get('.mint-slider__value').classes()).toContain(`mint-slider__value--${tone}`)
    })

    it('should compare thresholds against the percentage of the range', () => {
      const wrapper = mount(BaseSlider, {
        props: { modelValue: 5, min: 0, max: 10, thresholds: [10, 30] },
      })

      expect(wrapper.get('.mint-slider__value').classes()).toContain('mint-slider__value--error')
    })
  })

  describe('sizes (1f)', () => {
    it.each([
      ['sm', '2px'],
      ['md', '4px'],
      ['lg', '6px'],
    ] as const)('should draw a %s track %s tall', (size, height) => {
      const wrapper = mount(BaseSlider, { props: { modelValue: 40, size } })

      expect((wrapper.get('.mint-slider__track').element as HTMLElement).style.height).toBe(height)
    })

    it.each([
      ['sm', '12px'],
      ['md', '14px'],
      ['lg', '18px'],
    ] as const)('should draw a %s thumb %s wide', (size, width) => {
      const wrapper = mount(BaseSlider, { props: { modelValue: 40, size } })

      expect((wrapper.get('.mint-slider__thumb').element as HTMLElement).style.width).toBe(width)
    })

    it('should place the thumb after the native input so the focus rule can reach it', () => {
      const wrapper = mount(BaseSlider, { props: { modelValue: 40 } })

      expect(wrapper.find('.mint-slider__input + .mint-slider__thumb').exists()).toBe(true)
    })
  })

  describe('labels', () => {
    it('should label the ends with min and max by default', () => {
      const wrapper = mount(BaseSlider, { props: { modelValue: 5, min: 2, max: 8, showLabels: true } })

      expect(wrapper.findAll('.mint-slider__labels span').map(label => label.text())).toEqual(['2', '8'])
    })

    it('should use custom end labels when given', () => {
      const wrapper = mount(BaseSlider, {
        props: { modelValue: 5, showLabels: true, minLabel: 'Low', maxLabel: 'High' },
      })

      expect(wrapper.findAll('.mint-slider__labels span').map(label => label.text())).toEqual(['Low', 'High'])
    })
  })
})