import { mount} from '@vue/test-utils'
import { expect, test, describe, vi, beforeEach } from 'vitest'
import UsersManager from '@organisms/UsersManager/UsersManager.vue';
import axios from "axios";
import {store, serviceOfUsers} from './StaticMocks.js'

vi.mock('axios')


describe("tests SitesManagerPage component mounted with vuex", () => {

  vi.mock('tabulator-tables', () => {
    const mockTabulator = vi.fn().mockImplementation(() => ({
      // Mock implementation details
    }));
    return { TabulatorFull: mockTabulator }; // Adjust based on what you're trying to mock
  });

  beforeEach(async () => {
    store.dispatch('users/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, {
      global: {
        plugins: [store],
        props: {
          serviceOfUsers
        }
      }
    })

    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]
      },
      props: {
        serviceOfUsers
      }
    })

    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("new-user-container")

    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("new-user-container")
  })

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

    await wrapper.vm.openUserPanelOfSelect()

    const usersOffSite = store.getters['users/usersOffSite']

    const componentState = wrapper.vm.componentState
    const gridCols = wrapper.vm.gridCols

    expect(componentState).toBe('select')
    expect(gridCols).toBe('grid-cols-2')
    expect(usersOffSite).toEqual([{id: 1, name: 'user1'}, {id: 2, name: 'user2'}])
  })
})