import { USidebar } from './USidebar'
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import { UApp } from '../UApp/UApp'
import { ref, shallowRef } from 'vue'

describe('USidebar', () => {
  it('should render correctly', () => {
    const wrapper = mount({
      template: `
        <u-app>
            <u-sidebar></u-sidebar>
        </u-app>`,
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with primary variant', () => {
    const wrapper = mount({
      template: `
        <u-app>
            <u-sidebar variant="primary"></u-sidebar>
        </u-app>`,
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with gray variant', () => {
    const wrapper = mount({
      template: `
        <u-app>
            <u-sidebar variant="gray"></u-sidebar>
        </u-app>`,
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with light theme', () => {
    const wrapper = mount({
      template: `
            <u-app theme="light">
                <u-sidebar></u-sidebar>
            </u-app>`,
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with dark theme', () => {
    const wrapper = mount({
      template: `
            <u-app theme="dark">
                <u-sidebar></u-sidebar>
            </u-app>`,
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with left location', () => {
    const wrapper = mount({
      template: `
            <u-app>
                <u-sidebar location="left"></u-sidebar>
            </u-app>`,
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with right location', () => {
    const wrapper = mount({
      template: `
            <u-app>
                <u-sidebar location="right"></u-sidebar>
            </u-app>`,
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with top location', () => {
    const wrapper = mount({
      template: `
            <u-app>
                <u-sidebar location="top"></u-sidebar>
            </u-app>`,
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with border', () => {
    const wrapper = mount({
      template: `
                <u-app>
                    <u-sidebar border="true"></u-sidebar>
                </u-app>`,
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly with elevation', () => {
    const wrapper = mount({
      template: `
                <u-app>
                    <u-sidebar elevation="true"></u-sidebar>
                </u-app>`,
    })
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should render correctly permanent sidebar', async () => {
    const wrapper = mount({
      components: {
        USidebar,
        UApp,
      },
      template: `
        <u-app>
          <u-sidebar v-model="drawer">
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
            </ul>
          </u-sidebar>
        </u-app>`,
      setup() {
        const drawer = ref(false)
        const isHovering = shallowRef(false)
        return { drawer, isHovering }
      },
    })

    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('USidebar events', () => {
  it('should change isHovering on hover with expand-on-hover', async () => {
    const wrapper = mount({
      components: {
        USidebar,
        UApp,
      },
      template: `
        <u-app>
          <u-sidebar v-model="drawer" rail expand-on-hover>
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
            </ul>
          </u-sidebar>
        </u-app>`,
      setup() {
        const drawer = ref(false)
        const isHovering = shallowRef(false)
        return { drawer, isHovering }
      },
    })

    expect(wrapper.html()).toMatchSnapshot()

    const sidebar = wrapper.findComponent(USidebar)

    await wrapper.find('.sidebar-drawer').trigger('mouseenter')

    expect(sidebar.vm.isHovering).toBe(true)

    await wrapper.find('.sidebar-drawer').trigger('mouseleave')

    expect(sidebar.vm.isHovering).toBe(false)
  })

  it('should open by click on toggle button', async () => {
    const wrapper = mount(
      {
        components: {
          USidebar,
          UApp,
        },
        template: `
        <u-app>
          <div class="toggle" @click="toggleDrawer">toggle</div>
          <u-sidebar 
            v-model="drawer"
            temporary
          >
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
            </ul>
          </u-sidebar>
        </u-app>`,
        setup() {
          const drawer = ref(false)
          const toggleDrawer = () => {
            drawer.value = !drawer.value
          }
          return { drawer, toggleDrawer }
        },
      },
      { props: {} }
    )
    await wrapper.find('.toggle').trigger('click')
    expect(wrapper.vm.drawer).toBe(true)
  })

  it('should emit update:rail event when isHovering is set to true', async () => {
    const wrapper = mount(
      {
        components: {
          USidebar,
          UApp,
        },
        template: `
        <u-app>
            <u-sidebar rail expand-on-hover is-hovering="false">
              <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
              </ul>
            </u-sidebar>
        </u-app>`,
      },
      {
        props: {
          'onUpdate:rail': (e) => {
            wrapper.setProps({ rail: e })
          },
        },
      }
    )

    const sidebarComponent = wrapper.findComponent(USidebar)
    const sidebar = wrapper.find('.sidebar-drawer')
    await sidebar.trigger('mouseenter')

    expect(sidebarComponent.emitted('update:rail')).toBeTruthy()
    expect(sidebarComponent.vm.rail).toBe(true)
  })
})