import { flushPromises, mount } from '@vue/test-utils';
import { VRangeSlider } from 'vuetify/components';
import DoubleSliderSelector from '@/components/shared/DoubleSliderSelector.vue';

describe('DoubleSliderSelector tests', () => {
  it('should timeout the thumb', async () => {
    vi.useFakeTimers();
    const props = { min: 0, max: 100, label: 'test' };
    const wrapper = mount(DoubleSliderSelector, { props });
    await wrapper.setProps({ modelValue: [1, 1] });
    const slider = wrapper.findComponent(VRangeSlider);
    vi.advanceTimersByTime(999);
    expect(slider.props().thumbLabel).toEqual('always');
    vi.advanceTimersByTime(1);
    await flushPromises();
    expect(slider.props().thumbLabel).toEqual(false);
  });

  it('should clamp lower only to min', async () => {
    const props = { min: 0, max: 100 };
    const wrapper = mount(DoubleSliderSelector, { props });
    await wrapper.findComponentByTestId('lower').setValue(-100);
    await wrapper.findComponentByTestId('lower').trigger('blur');
    await wrapper.findComponentByTestId('upper').setValue(50);
    await wrapper.findComponentByTestId('upper').trigger('blur');
    expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 0]], [[0, 50]]]);
  });

  it('should clamp upper only to max', async () => {
    const props = { min: 0, max: 100 };
    const wrapper = mount(DoubleSliderSelector, { props });
    await wrapper.findComponentByTestId('upper').setValue(200);
    await wrapper.findComponentByTestId('upper').trigger('blur');
    await wrapper.findComponentByTestId('lower').setValue(50);
    await wrapper.findComponentByTestId('lower').trigger('blur');
    expect(wrapper.emitted('update:modelValue')).toEqual([
      [[0, 100]],
      [[50, 100]],
    ]);
  });

  it('should clamp lower and upper to min', async () => {
    const props = { min: 0, max: 100 };
    const wrapper = mount(DoubleSliderSelector, { props });
    await wrapper.findComponentByTestId('lower').setValue(-100);
    await wrapper.findComponentByTestId('lower').trigger('blur');
    await wrapper.findComponentByTestId('upper').setValue(-10);
    await wrapper.findComponentByTestId('upper').trigger('blur');
    expect(wrapper.emitted('update:modelValue')).toEqual([[[0, 0]], [[0, 0]]]);
  });

  it('should clamp lower and upper to max', async () => {
    const props = { min: 0, max: 100 };
    const wrapper = mount(DoubleSliderSelector, { props });
    await wrapper.findComponentByTestId('upper').setValue(9001);
    await wrapper.findComponentByTestId('upper').trigger('blur');
    await wrapper.findComponentByTestId('lower').setValue(9000);
    await wrapper.findComponentByTestId('lower').trigger('blur');
    expect(wrapper.emitted('update:modelValue')).toEqual([
      [[0, 100]],
      [[100, 100]],
    ]);
  });

  it('should update left label position when thumb is less than 10', async () => {
    const props = { min: 0, max: 100 };
    const wrapper = mount(DoubleSliderSelector, { props });
    const slider = wrapper.findComponent(VRangeSlider);
    slider.vm.$el.getElementsByClassName = () => [
      { offsetLeft: 5 },
      { offsetLeft: 150 },
    ];
    wrapper.vm.applyRangeSliderLabelBoundaries();
    expect(wrapper.vm.leftOffset).toBe('translateX(-25%)');
    expect(wrapper.vm.rightOffset).toBe('translateX(-50%)');
  });
  it('should update left label position when thumb is greater than 220', async () => {
    const props = { min: 0, max: 100 };
    const wrapper = mount(DoubleSliderSelector, { props });
    const slider = wrapper.findComponent(VRangeSlider);
    slider.vm.$el.getElementsByClassName = () => [
      { offsetLeft: 250 },
      { offsetLeft: 150 },
    ];
    wrapper.vm.applyRangeSliderLabelBoundaries();
    expect(wrapper.vm.leftOffset).toBe('translateX(-100%)');
    expect(wrapper.vm.rightOffset).toBe('translateX(-50%)');
  });
  it('should update right label position when right thumb is greater than 220', async () => {
    const props = { min: 0, max: 100 };
    const wrapper = mount(DoubleSliderSelector, { props });
    const slider = wrapper.findComponent(VRangeSlider);
    slider.vm.$el.getElementsByClassName = () => [
      { offsetLeft: 100 },
      { offsetLeft: 250 },
    ];
    wrapper.vm.applyRangeSliderLabelBoundaries();
    expect(wrapper.vm.rightOffset).toBe('translateX(-100%)');
    expect(wrapper.vm.leftOffset).toBe('translateX(-50%)');
  });
  it('should update left and right label position when thumbs are within bounds', async () => {
    const props = { min: 0, max: 100 };
    const wrapper = mount(DoubleSliderSelector, { props });
    const slider = wrapper.findComponent(VRangeSlider);
    slider.vm.$el.getElementsByClassName = () => [
      { offsetLeft: 100 },
      { offsetLeft: 150 },
    ];
    wrapper.vm.applyRangeSliderLabelBoundaries();
    expect(wrapper.vm.leftOffset).toBe('translateX(-50%)');
    expect(wrapper.vm.rightOffset).toBe('translateX(-50%)');
  });
});