import { UInput } from './UInput'
import { InputRules } from '../../types/inputRules'
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import sleep from '../../../tests/utils/sleep'

describe('UInput', () => {
  it('should render correctly', () => {
    const wrapper = mount(UInput)
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render enabled state with enabled prop', async () => {
    const wrapper = mount(UInput, {
      props: {
        enabled: true,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render disabled state with enabled false prop', async () => {
    const wrapper = mount(UInput, {
      props: {
        enabled: false,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render error state with error prop', async () => {
    const wrapper = mount(UInput, {
      props: {
        error: true,
        errorMessages: ['errorMessage 1'],
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('.error').exists()).toBe(true)
    expect(wrapper.find('.error').text()).toBe('errorMessage 1')
  })

  it('should render label when label prop is passed', async () => {
    const wrapper = mount(UInput, {
      props: {
        label: 'label',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('.label').exists()).toBe(true)
    expect(wrapper.find('.label').text()).toBe('label')
  })

  it('should render hint when hint prop is passed', async () => {
    const wrapper = mount(UInput, {
      props: {
        hint: 'hint',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('div').text()).toBe('hint')
  })

  it('should render placeholder when placeholder prop is passed', async () => {
    const wrapper = mount(UInput, {
      props: {
        placeholder: 'placeholder',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('input').attributes('placeholder')).toBe('placeholder')
  })

  it('should render hints when autocomplete prop is passed', async () => {
    const wrapper = mount(UInput, {
      props: {
        autocomplete: 'on',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('input').attributes('autocomplete')).toBe('on')
  })

  it('should render tooltip when tooltip props when passed and icon is hovered', async () => {
    const wrapper = mount(UInput, {
      props: {
        modelValue: '',
        appendIcon: 'helpCircle',
        tooltipTitle: 'tooltipTitle',
        tooltipText: 'tooltipText',
        tooltipTheme: 'dark',
        tooltipPosition: 'none bottom',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('.tooltip').classes()).toContain('opacity-0')

    const toggle = wrapper.find('.toggle')
    await toggle.trigger('mouseenter')

    await sleep(10)

    expect(wrapper.find('.tooltip').classes()).toContain('opacity-1')

    /* setTimeout(() => {
      expect(wrapper.find('.tooltip').classes()).toContain('opacity-1')
    }, 10) */
  })

  it('should render sm size when size prop is passed', async () => {
    const wrapper = mount(UInput, {
      props: {
        size: 'sm',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render md size when size prop is passed', async () => {
    const wrapper = mount(UInput, {
      props: {
        size: 'md',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly when name prop is passed', async () => {
    const wrapper = mount(UInput, {
      props: {
        name: 'name',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('input').attributes('name')).toBe('name')
  })

  it('should render correctly when type prop is passed', async () => {
    const wrapper = mount(UInput, {
      props: {
        type: 'text',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('input').attributes('type')).toBe('text')
  })

  it('should render appendIcon when appendIcon prop is passed', async () => {
    const wrapper = mount(UInput, {
      props: {
        appendIcon: 'helpCircle',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.findComponent({ name: 'UIcon' }).exists()).toBe(true)
    expect(wrapper.findComponent({ name: 'UIcon' }).props('icon')).toBe(
      '$helpCircle'
    )
  })

  it('should render prependIcon when prependIcon prop is passed', async () => {
    const wrapper = mount(UInput, {
      props: {
        prependIcon: 'helpCircle',
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.findComponent({ name: 'UIcon' }).exists()).toBe(true)
    expect(wrapper.findComponent({ name: 'UIcon' }).props('icon')).toBe(
      '$helpCircle'
    )
  })
})

describe('UInput events', () => {
  //onInput validation
  it('should update modelValue when input is changed with onInput validation', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'input',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
      },
    })
    await wrapper.find('input').setValue('test')
    expect(wrapper.emitted('input')).toBeTruthy()
    expect(wrapper.props('modelValue')).toBe('test')
  })

  it('should emit validationError when input wrong', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'input',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
        rules: [InputRules.email[1]],
      },
    })
    await wrapper.find('input').setValue('testemail')
    expect(wrapper.emitted('input')).toBeTruthy()
    expect(wrapper.emitted('validationError')).toBeTruthy()
  })

  it('should emit validationSuccess when input wrong', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'input',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
        rules: [InputRules.email[1]],
      },
    })
    await wrapper.find('input').setValue('test@email.com')
    expect(wrapper.emitted('input')).toBeTruthy()
    expect(wrapper.emitted('validationSuccess')).toBeTruthy()
  })

  //onBlur validation
  it('should update modelValue when input is changed with onBlur validation', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'blur',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
      },
    })
    await wrapper.find('input').setValue('test')
    await wrapper.find('input').trigger('blur')
    expect(wrapper.emitted('blur')).toBeTruthy()
    expect(wrapper.props('modelValue')).toBe('test')
  })

  it('should emit validationError when input wrong', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'blur',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
        rules: [InputRules.email[1]],
      },
    })
    await wrapper.find('input').setValue('')
    await wrapper.find('input').trigger('blur')
    expect(wrapper.emitted('validationError')).toBeTruthy()
  })

  it('should emit validationSuccess when input wrong', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'blur',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
        rules: [InputRules.email[1]],
      },
    })
    await wrapper.find('input').setValue('validEmail@mail.com')
    await wrapper.find('input').trigger('blur')
    expect(wrapper.emitted('validationSuccess')).toBeTruthy()
  })

  //onChange validation
  it('should update modelValue when input is changed with onChange validation', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'change',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
      },
    })
    await wrapper.find('input').setValue('test')
    await wrapper.find('input').trigger('change')
    expect(wrapper.emitted('change')).toBeTruthy()
    expect(wrapper.props('modelValue')).toBe('test')
  })

  it('should emit validationError when input wrong', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'change',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
        rules: [InputRules.email[1]],
      },
    })
    await wrapper.find('input').setValue('')
    await wrapper.find('input').trigger('change')
    expect(wrapper.emitted('validationError')).toBeTruthy()
  })

  it('should emit validationSuccess when input wrong', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'change',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
        rules: [InputRules.email[1]],
      },
    })
    await wrapper.find('input').setValue('valid@mail.com')
    await wrapper.find('input').trigger('change')
    expect(wrapper.emitted('validationSuccess')).toBeTruthy()
  })

  //onSubmit validation
  it('should update modelValue when input is changed with onSubmit validation', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'submit',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
      },
    })
    await wrapper.find('input').setValue('test')
    await wrapper.find('input').trigger('submit')
    expect(wrapper.emitted('submit')).toBeTruthy()
    expect(wrapper.props('modelValue')).toBe('test')
  })

  it('should emit validationError when input wrong', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'submit',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
        rules: [InputRules.email[1]],
      },
    })
    await wrapper.find('input').setValue('invalidmail')
    await wrapper.find('input').trigger('submit')
    expect(wrapper.emitted('validationError')).toBeTruthy()
  })

  it('should emit validationSuccess when input wrong', async () => {
    const wrapper = mount(UInput, {
      props: {
        validateOn: 'submit',
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
        rules: [InputRules.email[1]],
      },
    })
    await wrapper.find('input').setValue('test@mail.com')
    await wrapper.find('input').trigger('submit')
    expect(wrapper.emitted('validationSuccess')).toBeTruthy()
  })
})