import SiteList from '@organisms/SitesEditor/SiteList.vue'
import SiteCard from '@organisms/SitesEditor/SiteCard.vue'
import EditCard from '@organisms/SitesEditor/EditCard.vue'
import Input from '@atoms/Input.vue'
import Textarea from '@atoms/Textarea.vue'
import DoubleSwitch from '@atoms/DoubleSwitch.vue'
import {mount} from '@vue/test-utils'
import {createStore} from 'vuex'
import {describe, expect, it} from 'vitest'

const defaultSites = [ {
  "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
},
{
  "id": 2,
  "created_at": "0001-01-01T00:00:00Z",
  "updated_at": "2024-02-27T17:53:14.070484767+03:00",
  "deleted_at": null,
  "name": "new",
  "port": 3645,
  "proxy_ip": "172.25.78.151",
  "site_ip": "172.25.78.151",
  "internet_uri": "",
  "description": "create... upd...",
  "is_online": true
},
{
  "id": 3,
  "created_at": "2024-02-26T17:50:07.191225008+03:00",
  "updated_at": "2024-02-28T09:41:49.274089436+03:00",
  "deleted_at": null,
  "name": "new",
  "port": 3645,
  "proxy_ip": "172.25.78.151",
  "site_ip": "172.25.78.151",
  "internet_uri": "",
  "description": "new updated...",
  "is_online": false
}]

const store = createStore({
  plugins: [],
  modules: {
    proxy: {
      state: {
        sites: [],
        sitesState: 'loading',
        selectedSite: null,
        isSaveData: false,
      },
      getters: {
        sites: (state) => state.sites,
        sitesState: (state) => state.sitesState,
        selectedSite: (state) => state.selectedSite,
        isSaveData: (state) => state.isSaveData,
      },
      mutations: {
        setSites: (state, updval) =>  state.sites = updval,
        setSitesState: (state, updval) => state.sitesState = updval,
        setSelectedSite: (state, updval) => state.selectedSite = updval,
        setIsSaveData: (state, updval) => state.isSaveData = updval,
      },
      actions: {
        uploadSites({commit}, sites) {
          commit('setSites', sites)
        },
        uploadSiteRoutes: async ({commit}, siteProps) => {
          commit('setSelectedSite', siteProps)
        }
      },
      namespaced: true,
    }
  }
})


describe("Services", () => {
  
  it("Not renders SiteCard and NewSiteButton in SiteList, if sitesState value not 'active', renders SiteList, fwb-spinner", async () => {

    const wrapper = mount(SiteList, {
      global: {
        plugins: [store],
      },
      shallow: true,
    })
    
    expect(wrapper.html()).not.toContain('Добавить сайт')
    expect(wrapper.find(".text-slate-700").text()).toBe("Загрузка сайтов...")
  })

  it("Not renders fwb-spinner, SiteCard if sitesState value 'active', sites empty array, renders SiteList, NewSiteButton", async () => {

    store.commit('proxy/setSitesState', 'active')

    const wrapper = mount(SiteList, {
      global: {
        plugins: [store],
      },
    })

    expect(wrapper.html()).not.toContain('Загрузка сайтов...')
    expect(wrapper.find('span').exists()).toBe(false)
    expect(wrapper.html()).toContain('Добавить сайт')
  })

  it("Not renders fwb-spinner, sites array not empty, sitesState value 'active', renders SiteList, NewSiteButton, SiteCard", async () => {

    store.dispatch('proxy/uploadSites', defaultSites)
    store.commit('proxy/setSitesState', 'active')

    const wrapper = mount(SiteList, {
      global: {
        mocks: {
          $store: store
        }
      },
    })

    expect(wrapper.find('span').exists()).toBe(true)
    expect(wrapper.find('i').exists()).toBe(true)
    expect(wrapper.html()).toContain('ri-pencil-line')
    expect(wrapper.html()).toContain('Добавить сайт')
    
  })

  it("dynamicHeight null in SiteList component", async () => {

    store.dispatch('proxy/uploadSites', defaultSites)
    store.commit('proxy/setSitesState', 'active')

    // const getters = {...store.getters }
    // console.log('sites 3 test', getters['proxy/sites'])

    const wrapper = mount(SiteList, {
      global: {
        mocks: {
          $store: store
        }
      },
      data() {
        return {
          dynamicHeight: null
        }
      },
      shallow: true,
    })

    console.log('wrapper.html', wrapper.html())

    expect(wrapper.classes()).not.toContain('shadow-lg')
    expect(wrapper.classes()).not.toContain('p-3')
    expect(wrapper.html()).not.toContain('style="max-height: 100px;"')
    
  })

  it("set dynamicHeight, this data prop not null in SiteList component", async () => {

    console.log('store - 5 test', store)
    store.dispatch('proxy/uploadSites', defaultSites)
    store.commit('proxy/setSitesState', 'active')

    const wrapper = mount(SiteList, {
      global: {
        plugins: [store],
      },
      data() {
        return {
          dynamicHeight: null
        }
      },
      shallow: true,
    })

    await wrapper.setData({ dynamicHeight: 100 })

    expect(wrapper.html()).toContain('style="max-height: 100px;"')
    
  })

  it("renders buttons - 'Отменить' and 'Удалить' in this site, after click to delete button", async () => {
    const wrapper = mount(SiteCard, {
      global: {
        plugins: [store],
      },
      data () {
        return {
          isDelete: false,
        }
      },
    })

    await wrapper.setData({ isDelete: true })

    await wrapper.get('.ri-delete-bin-line').trigger('click')
    
    expect(wrapper.html()).toContain('Отменить')
    expect(wrapper.html()).toContain('Удалить')
  })

  it("render EditCard, ids selectedSite and prop id is Equal", async () => {
    
    const editSite = {
      "id": 1,
      "created_at": "2024-03-04T14:30:40.64845074+03:00",
      "updated_at": "2024-03-04T14:30:40.64845074+03:00",
      "deleted_at": null,
      "name": "jsonplaceholder.typicode.com",
      "port": 9965,
      "proxy_ip": "172.25.78.153",
      "site_ip": "https://jsonplaceholder.typicode.com/",
      "internet_uri": "localhost",
      "description": "localhost",
      "is_online": true
    }

    store.dispatch('proxy/uploadSites', defaultSites)
    store.commit('proxy/setSitesState', 'active')
    store.dispatch('proxy/uploadSiteRoutes', editSite)
      
    const wrapper = mount(EditCard, {
      global: {
        plugins: [store],
        stubs: ['SiteCard', 'EditCard'],
      },
      props: {
        id: 1,
      },
      
    })

    const editCard = wrapper.getComponent(EditCard)
    
    expect(editCard.props('id')).toEqual(editSite.id)
    expect(wrapper.html()).toContain('ri-close-line')
    expect(wrapper.html()).toContain('Онлайн')
  })


  it("render EditCard, set fields in selectedSite", async () => {
    
    const editSite = {
      "id": 1,
      "created_at": "2024-03-04T14:30:40.64845074+03:00",
      "updated_at": "2024-03-04T14:30:40.64845074+03:00",
      "deleted_at": null,
      "name": "jsonplaceholder.typicode.com",
      "port": 9965,
      "proxy_ip": "172.25.78.153",
      "site_ip": "https://jsonplaceholder.typicode.com/",
      "internet_uri": "localhost",
      "description": "localhost",
      "is_online": true
    }

    store.dispatch('proxy/uploadSites', defaultSites)
    store.commit('proxy/setSitesState', 'active')
    store.dispatch('proxy/uploadSiteRoutes', editSite)

    expect(store.getters['proxy/selectedSite']).toEqual(editSite) // check default props values in selected site

    store.commit('proxy/setSelectedSite', {...editSite, is_online: false, name: 'edit name in EditCard', description: 'edit description in EditCard'})
      
    const wrapper = mount(EditCard, {
      global: {
        plugins: [store],
        stubs: ['Input', 'Textarea', 'DoubleSwitch', 'EditCard'],
      },
      props: {
        id: 1,
      },
      
    })

    const editCard = wrapper.getComponent(EditCard)

    const inputField = wrapper.getComponent(Input)
    const textareaField = wrapper.getComponent(Textarea)
    const doubleSwitchField = wrapper.getComponent(DoubleSwitch)

    const nameField = inputField.props().value
    const descriptionField = textareaField.props().value
    const isOnlineField = doubleSwitchField.props().isCheck

    const getters = {...store.getters }
    const name = getters['proxy/selectedSite'].name // selected site name
    const description = getters['proxy/selectedSite'].description // selected site description
    const isOnline = getters['proxy/selectedSite'].is_online // selected site is_online
    
    expect(editCard.props('id')).toEqual(editSite.id)
    expect(name).toEqual(nameField)
    expect(description).toEqual(descriptionField)
    expect(isOnline).toEqual(isOnlineField)
  })

})
