import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
import { fireEvent, render, screen } from '@testing-library/react'
import type { ECharts } from 'echarts'
import { ZoomToggle } from './zoom-toggle'
import { Provider } from '../../provider/widget-provider'
import {
  applyTransforms,
  clearAllWidgetStores,
  getWidgetStore,
  setEchartInstance,
} from '../../stores'

beforeEach(() => clearAllWidgetStores())
afterEach(() => clearAllWidgetStores())

describe('<ZoomToggle>', () => {
  it('starts disabled by default', () => {
    render(
      <Provider id='zt-1' data={[]}>
        <ZoomToggle />
      </Provider>,
    )
    const trigger = screen.getByLabelText('Enable zoom')
    expect(trigger.getAttribute('aria-pressed')).toBe('false')
  })

  it('respects initialEnabled=true', () => {
    render(
      <Provider id='zt-2' data={[]}>
        <ZoomToggle initialEnabled />
      </Provider>,
    )
    expect(screen.getByLabelText('Disable zoom')).toBeTruthy()
  })

  it('clicking enables the transform — dataZoom appears in the post-pipeline option', () => {
    render(
      <Provider id='zt-3' data={[1]}>
        <ZoomToggle />
      </Provider>,
    )
    fireEvent.click(screen.getByLabelText('Enable zoom'))
    // configTransforms now apply inside <Widget.Echart>; replay the
    // pipeline locally over a blank structural option.
    const configTransforms = getWidgetStore('zt-3').getState().configTransforms
    const opts = applyTransforms({}, configTransforms) as {
      dataZoom?: { type: string }[]
    }
    expect(opts.dataZoom).toBeTruthy()
    expect(opts.dataZoom).toHaveLength(2)
    expect(opts.dataZoom?.[0]?.type).toBe('inside')
    expect(opts.dataZoom?.[1]?.type).toBe('slider')
  })

  it('clicking to disable issues a one-shot setOption({}, replaceMerge: ["dataZoom"]) on the live instance', () => {
    const setOption = vi.fn()
    const chart = { setOption } as unknown as ECharts
    render(
      <Provider id='zt-4' data={[1]}>
        <ZoomToggle initialEnabled />
      </Provider>,
    )
    setEchartInstance('zt-4', chart)
    fireEvent.click(screen.getByLabelText('Disable zoom'))
    expect(setOption).toHaveBeenCalledTimes(1)
    expect(setOption).toHaveBeenCalledWith({}, { replaceMerge: ['dataZoom'] })
  })

  it('clicking to enable does NOT touch the live instance (no cleanup needed)', () => {
    const setOption = vi.fn()
    const chart = { setOption } as unknown as ECharts
    render(
      <Provider id='zt-5' data={[1]}>
        <ZoomToggle />
      </Provider>,
    )
    setEchartInstance('zt-5', chart)
    fireEvent.click(screen.getByLabelText('Enable zoom'))
    expect(setOption).not.toHaveBeenCalled()
  })

  it('rehydrates enabled state from transformStates on remount', () => {
    const { unmount } = render(
      <Provider id='zt-6' data={[1]} keepAlive>
        <ZoomToggle />
      </Provider>,
    )
    fireEvent.click(screen.getByLabelText('Enable zoom'))
    unmount()
    render(
      <Provider id='zt-6' data={[1]} keepAlive>
        <ZoomToggle />
      </Provider>,
    )
    // Re-mounted with keepAlive — enabled survived.
    expect(screen.getByLabelText('Disable zoom')).toBeTruthy()
  })

  it('honors custom labels', () => {
    render(
      <Provider id='zt-7' data={[]}>
        <ZoomToggle labels={{ off: 'Pan & zoom', on: 'Stop pan & zoom' }} />
      </Provider>,
    )
    expect(screen.getByLabelText('Pan & zoom')).toBeTruthy()
  })
})