import Vue from 'vue'
import { mount } from '@vue/test-utils'
import { asyncExpect } from '@/tests/utils'
import Table from '..'

describe('Table.rowSelection', () => {
  const columns = [{
    title: 'Name',
    dataIndex: 'name',
  }]

  const data = [
    { key: 0, name: 'Jack' },
    { key: 1, name: 'Lucy' },
    { key: 2, name: 'Tom' },
    { key: 3, name: 'Jerry' },
  ]
  function getTableOptions (props = {}, listeners = {}) {
    return {
      propsData: {
        columns,
        dataSource: data,
        rowSelection: {},
        ...props,
      },
      listeners: {
        ...listeners,
      },
      sync: false,
      attachedToDocument: true,
    }
  }
  function renderedNames (wrapper) {
    return wrapper.findAll({ name: 'TableRow' }).wrappers.map(row => {
      return row.props().record.name
    })
  }

  function getStore (wrapper) {
    return wrapper.vm._vnode.componentInstance.store
  }

  it('select by checkbox', async () => {
    const wrapper = mount(Table, getTableOptions())
    const checkboxes = wrapper.findAll('input')
    const checkboxAll = checkboxes.at(0)
    checkboxAll.element.checked = true
    checkboxAll.trigger('change')
    await asyncExpect(() => {
      expect(getStore(wrapper).getState()).toEqual({
        selectedRowKeys: [0, 1, 2, 3],
        selectionDirty: true,
      })
    })
    checkboxes.at(1).element.checked = false
    checkboxes.at(1).trigger('change')
    await asyncExpect(() => {
      expect(getStore(wrapper).getState()).toEqual({
        selectedRowKeys: [1, 2, 3],
        selectionDirty: true,
      })
    })
    checkboxes.at(1).element.checked = true
    checkboxes.at(1).trigger('change')
    await asyncExpect(() => {
      expect(getStore(wrapper).getState()).toEqual({
        selectedRowKeys: [1, 2, 3, 0],
        selectionDirty: true,
      })
    })
  })

  it('select by radio', async () => {
    const wrapper = mount(Table, getTableOptions({ rowSelection: { type: 'radio' }}))
    const radios = wrapper.findAll('input')

    expect(radios.length).toBe(4)
    radios.at(0).element.checked = true
    radios.at(0).trigger('change')
    await asyncExpect(() => {
      expect(getStore(wrapper).getState()).toEqual({
        selectedRowKeys: [0],
        selectionDirty: true,
      })
    })
    radios.at(radios.length - 1).element.checked = true
    radios.at(radios.length - 1).trigger('change')
    await asyncExpect(() => {
      expect(getStore(wrapper).getState()).toEqual({
        selectedRowKeys: [3],
        selectionDirty: true,
      })
    })
  })

  it('pass getCheckboxProps to checkbox', () => {
    const rowSelection = {
      getCheckboxProps: record => ({ props: {
        disabled: record.name === 'Lucy',
        name: record.name,
      }}),
    }

    const wrapper = mount(Table, getTableOptions({ rowSelection }))
    const checkboxes = wrapper.findAll('input').wrappers
    expect(checkboxes[1].vnode.data.attrs.disabled).toBe(false)
    expect(checkboxes[1].vnode.data.attrs.name).toEqual(data[0].name)
    expect(checkboxes[2].vnode.data.attrs.disabled).toBe(true)
    expect(checkboxes[2].vnode.data.attrs.name).toEqual(data[1].name)
  })

  it('works with pagination', async () => {
    const wrapper = mount(Table, getTableOptions({ pagination: { pageSize: 2 }}))

    const checkboxAll = wrapper.find({ name: 'SelectionCheckboxAll' })
    const pagers = wrapper.findAll({ name: 'Pager' })
    checkboxAll.find('input').element.checked = true
    checkboxAll.find('input').trigger('change')
    await asyncExpect(() => {
      expect(checkboxAll.vm.$data).toEqual({ checked: true, indeterminate: false })
    })
    pagers.at(1).trigger('click')
    await asyncExpect(() => {
      expect(checkboxAll.vm.$data).toEqual({ checked: false, indeterminate: false })
    })
    pagers.at(0).trigger('click')
    await asyncExpect(() => {
      expect(checkboxAll.vm.$data).toEqual({ checked: true, indeterminate: false })
    })
  })

  // https://github.com/ant-design/ant-design/issues/4020
  it('handles defaultChecked', async () => {
    const rowSelection = {
      getCheckboxProps: record => ({
        defaultChecked: record.key === 0,
      }),
    }

    const wrapper = mount(Table, getTableOptions({ rowSelection }))

    await asyncExpect(() => {
      const checkboxs = wrapper.findAll('input')
      expect(checkboxs.at(1).vnode.data.domProps.checked).toBe(true)
      expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(false)
      checkboxs.at(2).element.checked = true
      checkboxs.at(2).trigger('change')
    })

    await asyncExpect(() => {
      const checkboxs = wrapper.findAll('input')
      expect(checkboxs.at(1).vnode.data.domProps.checked).toBe(true)
      expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(true)
    })
  })

  it('can be controlled', async () => {
    const wrapper = mount(Table, getTableOptions({ rowSelection: { selectedRowKeys: [0] }}))

    expect(getStore(wrapper).getState()).toEqual({
      selectedRowKeys: [0],
      selectionDirty: false,
    })

    wrapper.setProps({ rowSelection: { selectedRowKeys: [1] }})
    await asyncExpect(() => {
      expect(getStore(wrapper).getState()).toEqual({
        selectedRowKeys: [1],
        selectionDirty: false,
      })
    })
  })

  it('fires change & select events', async () => {
    const handleChange = jest.fn()
    const handleSelect = jest.fn()
    const rowSelection = {
      onChange: handleChange,
      onSelect: handleSelect,
    }
    const wrapper = mount(Table, getTableOptions({ rowSelection }))
    const checkboxs = wrapper.findAll('input')
    checkboxs.at(checkboxs.length - 1).element.checked = true
    checkboxs.at(checkboxs.length - 1).trigger('change')
    await asyncExpect(() => {
      expect(handleChange).toBeCalledWith([3], [{ key: 3, name: 'Jerry' }])
      expect(handleSelect.mock.calls.length).toBe(1)
      expect(handleSelect.mock.calls[0][0]).toEqual({ key: 3, name: 'Jerry' })
      expect(handleSelect.mock.calls[0][1]).toEqual(true)
      expect(handleSelect.mock.calls[0][2]).toEqual([{ key: 3, name: 'Jerry' }])
    })
  })

  it('fires selectAll event', async () => {
    const handleSelectAll = jest.fn()
    const rowSelection = {
      onSelectAll: handleSelectAll,
    }
    const wrapper = mount(Table, getTableOptions({ rowSelection }))
    const checkboxs = wrapper.findAll('input')
    checkboxs.at(0).element.checked = true
    checkboxs.at(0).trigger('change')
    await asyncExpect(() => {
      expect(handleSelectAll).toBeCalledWith(true, data, data)
    })
    checkboxs.at(0).element.checked = false
    checkboxs.at(0).trigger('change')
    await asyncExpect(() => {
      expect(handleSelectAll).toBeCalledWith(false, [], data)
    })
  })

  it('render with default selection correctly', async () => {
    const rowSelection = {
      selections: true,
    }
    const wrapper = mount(Table, getTableOptions({ rowSelection }))
    const dropdownWrapper = mount({
      render () {
        return wrapper.find({ name: 'Trigger' }).vm.getComponent()
      },
    }, { sync: false })
    await asyncExpect(() => {
      expect(dropdownWrapper.html()).toMatchSnapshot()
    })

    await asyncExpect(() => {

    })
  })

  it('click select all selection', () => {
    const handleSelectAll = jest.fn()
    const rowSelection = {
      onSelectAll: handleSelectAll,
      selections: true,
    }
    const wrapper = mount(Table, getTableOptions({ rowSelection }))

    const dropdownWrapper = mount({
      render () {
        return wrapper.find({ name: 'Trigger' }).vm.getComponent()
      },
    }, { sync: false })
    dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(0).trigger('click')

    expect(handleSelectAll).toBeCalledWith(true, data, data)
  })

  it('fires selectInvert event', () => {
    const handleSelectInvert = jest.fn()
    const rowSelection = {
      onSelectInvert: handleSelectInvert,
      selections: true,
    }
    const wrapper = mount(Table, getTableOptions({ rowSelection }))
    const checkboxes = wrapper.findAll('input')
    checkboxes.at(1).element.checked = true
    checkboxes.at(1).trigger('change')
    const dropdownWrapper = mount({
      render () {
        return wrapper.find({ name: 'Trigger' }).vm.getComponent()
      },
    }, { sync: false })
    const div = dropdownWrapper.findAll('.ant-dropdown-menu-item > div')
    div.at(div.length - 1).trigger('click')

    expect(handleSelectInvert).toBeCalledWith([1, 2, 3])
  })

  // it('fires selection event', () => {
  //   const handleSelectOdd = jest.fn()
  //   const handleSelectEven = jest.fn()
  //   const rowSelection = {
  //     selections: [{
  //       key: 'odd',
  //       text: '奇数项',
  //       onSelect: handleSelectOdd,
  //     }, {
  //       key: 'even',
  //       text: '偶数项',
  //       onSelect: handleSelectEven,
  //     }],
  //   }
  //   const wrapper = mount(Table, getTableOptions({ rowSelection }))

  //   const dropdownWrapper = mount({
  //     render () {
  //       return wrapper.find({ name: 'Trigger' }).vm.getComponent()
  //     },
  //   })
  //   expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(4)

  //   dropdownWrapper.find('.ant-dropdown-menu-item > div').at(2).trigger('click')
  //   expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])

  //   dropdownWrapper.find('.ant-dropdown-menu-item > div').at(3).trigger('click')
  //   expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
  // })

  // it('could hide default selection options', () => {
  //   const rowSelection = {
  //     hideDefaultSelections: true,
  //     selections: [{
  //       key: 'odd',
  //       text: '奇数项',
  //     }, {
  //       key: 'even',
  //       text: '偶数项',
  //     }],
  //   }
  //   const wrapper = mount(Table, getTableOptions({ rowSelection }))
  //   const dropdownWrapper = mount({
  //     render () {
  //       return wrapper.find({ name: 'Trigger' }).vm.getComponent()
  //     },
  //   })
  //   expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(2)
  // })

  // it('handle custom selection onSelect correctly when hide default selection options', () => {
  //   const handleSelectOdd = jest.fn()
  //   const handleSelectEven = jest.fn()
  //   const rowSelection = {
  //     hideDefaultSelections: true,
  //     selections: [{
  //       key: 'odd',
  //       text: '奇数项',
  //       onSelect: handleSelectOdd,
  //     }, {
  //       key: 'even',
  //       text: '偶数项',
  //       onSelect: handleSelectEven,
  //     }],
  //   }
  //   const wrapper = mount(Table, getTableOptions({ rowSelection }))

  //   const dropdownWrapper = mount({
  //     render () {
  //       return wrapper.find({ name: 'Trigger' }).vm.getComponent()
  //     },
  //   })
  //   expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(2)

  //   dropdownWrapper.find('.ant-dropdown-menu-item > div').at(0).trigger('click')
  //   expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])

  //   dropdownWrapper.find('.ant-dropdown-menu-item > div').at(1).trigger('click')
  //   expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
  // })

  // // https://github.com/ant-design/ant-design/issues/4245
  // it('handles disabled checkbox correctly when dataSource changes', () => {
  //   const rowSelection = {
  //     getCheckboxProps: record => ({ disabled: record.disabled }),
  //   }
  //   const wrapper = mount(Table, getTableOptions({ rowSelection }))
  //   const newData = [
  //     { key: 0, name: 'Jack', disabled: true },
  //     { key: 1, name: 'Lucy', disabled: true },
  //   ]
  //   wrapper.setProps({ dataSource: newData })
  //   wrapper.find('input').forEach((checkbox) => {
  //     expect(checkbox.props().disabled).toBe(true)
  //   })
  // })

  // // https://github.com/ant-design/ant-design/issues/4779
  // it('should not switch pagination when select record', () => {
  //   const newData = []
  //   for (let i = 0; i < 20; i += 1) {
  //     newData.push({
  //       key: i.toString(),
  //       name: i.toString(),
  //     })
  //   }
  //   const wrapper = mount(Table, getTableOptions({
  //     rowSelection: {},
  //     dataSource: newData,
  //   }))
  //   wrapper.find('Pager').last().trigger('click') // switch to second page
  //   wrapper.find('input').first().trigger('change', { target: { checked: true }})
  //   wrapper.update()
  //   expect(renderedNames(wrapper)).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19'])
  // })

  // it('highlight selected row', () => {
  //   const wrapper = mount(Table, getTableOptions())
  //   wrapper.find('input').at(1).trigger('change', { target: { checked: true }})
  //   expect(wrapper.find('tbody tr').at(0).hasClass('ant-table-row-selected')).toBe(true)
  // })

  // it('fix selection column on the left', () => {
  //   const wrapper = mount(Table, getTableOptions({
  //     rowSelection: { fixed: true },
  //   }))

  //   expect(wrapper).toMatchSnapshot()
  // })
})