import { mount} from '@vue/test-utils'
import { expect, test, describe, vi, beforeEach } from 'vitest'
import UsersManager from '@organisms/UsersManager/UsersManager.vue';
import { createStore } from 'vuex'
import {store as services} from '@/store/modules/services';
import {store as users} from '@/store/modules/users';
import axios from "axios";

vi.mock('axios')

describe("tests SitesManagerPage component mounted with vuex", () => {
  const store = createStore({
    plugins: [],
    modules: {
      services,
      users
    },
  })

  beforeEach(async () => {
    store.dispatch('users/resetStore')
    store.dispatch('services/resetStore')

    const mockData = [
      {
        "id": 1,
        "created_at": "2024-02-22T17:08:37.715772388+03:00",
        "updated_at": "2024-02-26T14:11:38.64094899+03:00",
        "deleted_at": null,
        "name": "jsonplaceholder.typicode.com",
        "port": 9965,
        "proxy_ip": "172.25.78.153",
        "site_ip": "172.25.78.153",
        "internet_uri": "localhost",
        "description": "localhost",
        "is_online": true
      }
    ]
    axios.get.mockResolvedValue({
      data: mockData,
    })

    await store.dispatch('services/uploadSites')

    store.dispatch('services/uploadAndSelectService', 1)
  })

  test('test UsersManager mounted with vuex', async () => {
    const wrapper = mount(UsersManager, {
      shallow: true,
      global: {
        plugins: [store]
      }
    })

    const componentState = wrapper.vm.componentState
    const gridCols = wrapper.vm.gridCols
    expect(componentState).toBe('view')
    expect(gridCols).toBe('grid-cols-1')
  })

  test('test UsersManager create user button', async () => {
    const wrapper = mount(UsersManager, {
      global: {
        plugins: [store]
      }
    })

    await wrapper.vm.openUserPanelOfCreate()

    let componentState = wrapper.vm.componentState
    let gridCols = wrapper.vm.gridCols

    let wrapperHtml = wrapper.html()
    expect(componentState).toBe('create')
    expect(gridCols).toBe('grid-cols-2')
    expect(wrapperHtml).toContain("Создать пользователя")

    await wrapper.vm.openUserPanelOfSelect()
    wrapperHtml = wrapper.html()
    componentState = wrapper.vm.componentState
    gridCols = wrapper.vm.gridCols
    expect(componentState).toBe('select')
    expect(gridCols).toBe('grid-cols-2')
    expect(wrapperHtml).toContain("Выбрать пользователя")
    expect(wrapperHtml).toContain("Выбрать пользователя")

    await wrapper.vm.closeUserPanel()
    wrapperHtml = wrapper.html()
    componentState = wrapper.vm.componentState
    gridCols = wrapper.vm.gridCols
    expect(componentState).toBe('view')
    expect(gridCols).toBe('grid-cols-1')
    expect(wrapperHtml).not.toContain("Выбрать пользователя")
    expect(wrapperHtml).not.toContain("Создать пользователя")
  })

  test('test UsersManager select user button', async () => {
    const wrapper = mount(UsersManager, {
      shallow: true,
      global: {
        plugins: [store]
      }
    })

    wrapper.vm.openUserPanelOfSelect()
    const componentState = wrapper.vm.componentState
    const gridCols = wrapper.vm.gridCols
    expect(componentState).toBe('select')
    expect(gridCols).toBe('grid-cols-2')
  })
})