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

const dropDownItems = [
  {
    image: 'https://www.coregames.com/api/profilepictures/1',
    text: 'Phoenix Baker',
    supportingText: '@phoenix',
  },
  {
    image: '',
    text: 'Olivia Rhye',
    supportingText: '@olivia',
  },
  {
    image: 'https://avatarfiles.alphacoders.com/123/123713.jpg',
    text: 'Lana Steiner',
    supportingText: '@lana',
  },
]

describe('UDropdown renders', () => {
  it('should render correctly', () => {
    const wrapper = mount(UDropdown, {
      props: {
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly disabled', () => {
    const wrapper = mount(UDropdown, {
      props: {
        disabled: true,
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.vm.isEnabled).toBe(false)
  })

  it('should render correctly enabled', () => {
    const wrapper = mount(UDropdown, {
      props: {
        disabled: false,
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.vm.isEnabled).toBe(true)
  })

  it('should render error messages', () => {
    const wrapper = mount(UDropdown, {
      props: {
        error: true,
        errorMessages: ['error message'],
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('.error').text()).toBe('error message')
  })

  it('should render label', () => {
    const wrapper = mount(UDropdown, {
      props: {
        label: 'label',
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('.label').text()).toBe('label')
  })

  it('should render correctly with placeholder', () => {
    const wrapper = mount(UDropdown, {
      props: {
        placeholder: 'placeholder',
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('.placeholder').text()).toBe('placeholder')
  })

  it('should render correctly with hint', () => {
    const wrapper = mount(UDropdown, {
      props: {
        hint: 'hint',
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.html()).toMatchSnapshot()
    expect(wrapper.find('.hint').text()).toBe('hint')
  })

  it('should render correctly with appendIcon', () => {
    const wrapper = mount(UDropdown, {
      props: {
        appendIcon: 'user1',
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.findComponent({ name: 'UIcon' }).props('icon')).toBe(
      '$user1'
    )
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with prependIcon', () => {
    const wrapper = mount(UDropdown, {
      props: {
        appendIcon: 'chevron-down',
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.findComponent({ name: 'UIcon' }).props('icon')).toBe(
      '$chevron-down'
    )
    expect(wrapper.html()).toMatchSnapshot()
  })

  //Test case: default variant of dropdown
  it('should render correctly with default variant', () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'default',
        disabled: false,
        appendIcon: 'chevron-down',
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.findComponent({ name: 'UInput' }).exists()).toBe(false)
    expect(wrapper.findComponent({ name: 'UIcon' }).exists()).toBe(true)
  })

  //Test case: search variant of dropdown
  it('should render correctly with search variant', () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'search',
        appendIcon: 'user1',
        prependIcon: 'chevronDown',
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.findComponent({ name: 'UInput' }).exists()).toBe(true)
    expect(wrapper.findComponent({ name: 'UIcon' }).props('icon')).toBe(
      '$chevronDown'
    )
  })

  //Test case: iconLeading variant of dropdown
  it('should render correctly with iconLeading variant', () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'iconLeading',
        prependIcon: 'user1',
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.findComponent({ name: 'UIcon' }).props('icon')).toBe(
      '$user1'
    )
    expect(wrapper.findComponent({ name: 'UInput' }).exists()).toBe(false)
  })

  //Test case: dotLeading variant of dropdown
  it('should render correctly with dotLeading variant', () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'dotLeading',
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.findComponent({ name: 'UInput' }).exists()).toBe(false)
    expect(
      wrapper.find('div.m-0\\.5.w-2.h-2.bg-success-500.rounded').exists()
    ).toBe(true)
  })

  //Test case: avatarLeading variant of dropdown
  it('should render correctly with avatarLeading variant', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'avatarLeading',
        disabled: false,
        prependIcon: 'user1',
        dropDownItems: dropDownItems,
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
      },
    })
    expect(wrapper.findComponent({ name: 'UInput' }).exists()).toBe(false)
  })

  it('should open menu correctly with avatarLeading variant', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'avatarLeading',
        disabled: false,
        prependIcon: 'user1',
        dropDownItems: dropDownItems,
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
      },
    })
    await wrapper.find('.field').trigger('click')
    expect(wrapper.vm.isActive).toBe(true)
    expect(wrapper.findComponent({ name: 'UAvatar' }).exists()).toBe(true)
  })

  //Test case: tags variant of dropdown
  it('should open dropdown when input is clicked', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'tags',
        prependIcon: 'searchLg',
        dropDownItems: dropDownItems,
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
      },
    })

    await wrapper.findComponent({ name: 'UInput' }).trigger('click')
    expect(wrapper.vm.isActive).toBe(true)
  })

  it('should display correct number of items in dropdown', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'tags',
        prependIcon: 'searchLg',
        dropDownItems: dropDownItems,
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
      },
    })

    await wrapper.findComponent({ name: 'UInput' }).trigger('click')
    const dropdownItems = wrapper.findAll('.dropdownItem')
    expect(dropdownItems.length).toBe(3)
  })

  it('should select item "Olivia Rhye" and display as tag', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'tags',
        prependIcon: 'searchLg',
        dropDownItems: dropDownItems,
        'onUpdate:modelValue': (e) => {
          wrapper.setProps({ modelValue: e })
        },
      },
    })

    await wrapper.findComponent({ name: 'UInput' }).trigger('click')
    const oliviaRhyeItem = wrapper
      .findAll('.dropdownItem')
      .find((item) => item.text().includes('Olivia Rhye'))

    if (oliviaRhyeItem) {
      await oliviaRhyeItem.trigger('click')
    } else {
      throw new Error("Element 'Olivia Rhye' not found.")
    }

    expect(wrapper.findComponent({ name: 'UTag' }).exists()).toBe(true)
  })
})

describe('UDropdown events', () => {
  it('should become Active by click', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'search',
        dropDownItems: dropDownItems,
      },
    })
    expect(wrapper.vm.isActive).toBe(false)
    const input = wrapper.findComponent({ name: 'UInput' })
    await input.trigger('click')
    expect(wrapper.vm.isActive).toBe(true)
  })

  it('should update dropdownItem by click in search variant', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'search',
        'onUpdate:modelValue': (v) => {
          wrapper.setProps({ modelValue: v })
        },
        dropDownItems: dropDownItems,
      },
    })
    const input = wrapper.findComponent({ name: 'UInput' })
    await input.trigger('click')

    const dropdownItem = wrapper.find('.dropdownItem')
    await dropdownItem.trigger('click')

    expect(wrapper.props('modelValue').text).toBe('Phoenix Baker')
  })

  it('should update dropdownItem by click in default variant', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'default',
        'onUpdate:modelValue': (v) => {
          wrapper.setProps({ modelValue: v })
        },
        dropDownItems: dropDownItems,
      },
    })
    const input = wrapper.find('.field')
    await input.trigger('click')

    const dropdownItem = wrapper.find('.dropdownItem')
    await dropdownItem.trigger('click')

    expect(wrapper.props('modelValue').text).toBe('Phoenix Baker')
  })

  it('should update dropdownItem by click in iconLeading variant', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'iconLeading',
        'onUpdate:modelValue': (v) => {
          wrapper.setProps({ modelValue: v })
        },
        dropDownItems: dropDownItems,
      },
    })
    const input = wrapper.find('.field')
    await input.trigger('click')

    const dropdownItem = wrapper.find('.dropdownItem')
    await dropdownItem.trigger('click')

    expect(wrapper.props('modelValue').text).toBe('Phoenix Baker')
  })

  it('should update dropdownItem by click in avatarLeading variant', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'avatarLeading',
        'onUpdate:modelValue': (v) => {
          wrapper.setProps({ modelValue: v })
        },
        dropDownItems: dropDownItems,
      },
    })
    const input = wrapper.find('.field')
    await input.trigger('click')

    const dropdownItem = wrapper.find('.dropdownItem')
    await dropdownItem.trigger('click')

    expect(wrapper.props('modelValue').text).toBe('Phoenix Baker')
  })

  it('should update dropdownItem by click in dotLeading variant', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'dotLeading',
        'onUpdate:modelValue': (v) => {
          wrapper.setProps({ modelValue: v })
        },
        dropDownItems: dropDownItems,
      },
    })
    const input = wrapper.find('.field')
    await input.trigger('click')

    const dropdownItem = wrapper.find('.dropdownItem')
    await dropdownItem.trigger('click')

    expect(wrapper.props('modelValue').text).toBe('Phoenix Baker')
  })

  it('should open dropdown when input is clicked', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'tags',
        'onUpdate:modelValue': (v) => {
          wrapper.setProps({ modelValue: v })
        },
        dropDownItems: dropDownItems,
      },
    })

    const input = wrapper.findComponent({ name: 'UInput' })
    await input.trigger('click')

    const dropdownItem = wrapper.find('.dropdownItem')
    expect(dropdownItem.exists()).toBe(true)
  })

  it('should update modelValue and display selected item as tag', async () => {
    const wrapper = mount(UDropdown, {
      props: {
        variant: 'tags',
        'onUpdate:modelValue': (v) => {
          wrapper.setProps({ modelValue: v })
        },
        dropDownItems: dropDownItems,
      },
    })

    const input = wrapper.findComponent({ name: 'UInput' })
    await input.trigger('click')

    const dropdownItem = wrapper.find('.dropdownItem')
    await dropdownItem.trigger('click')

    const updatedModelValue = wrapper.props('modelValue')
    expect(updatedModelValue[0].text).toBe('Phoenix Baker')
    expect(wrapper.findComponent({ name: 'UTag' }).text()).toBe('@phoenix')
  })
})

describe('UDropdown props', () => {
  describe('UDropdown isEnabled', () => {
    it('isEnabled should be false when dropDownItems.length == 0', () => {
      const wrapper = mount(UDropdown, {
        props: {
          dropDownItems: [],
        },
      })
      expect(wrapper.vm.isEnabled).toBe(false)
    })

    it('isEnabled should be false when dropDownItems.length !== 0 || disabled === true', () => {
      const wrapper = mount(UDropdown, {
        props: {
          dropDownItems: dropDownItems,
          disabled: true,
        },
      })
      expect(wrapper.vm.isEnabled).toBe(false)
    })

    it('isEnabled should be true when dropDownItems.length !== 0', () => {
      const wrapper = mount(UDropdown, {
        props: {
          dropDownItems: dropDownItems,
        },
      })
      expect(wrapper.vm.isEnabled).toBe(true)
    })
  })
})