import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { RouteFilter } from '../../src/components/RouteFilter'

describe('RouteFilter', () => {
  it('应该正确渲染初始状态', () => {
    const { getByText } = render(<RouteFilter />)

    expect(getByText('全部')).toBeTruthy()
    expect(getByText('去程')).toBeTruthy()
    expect(getByText('返程')).toBeTruthy()
    expect(getByText('筛选')).toBeTruthy()
  })

  it('应该处理路线类型选择', () => {
    const mockOnRouteTypeChange = jest.fn()
    const { getByText } = render(
      <RouteFilter onRouteTypeChange={mockOnRouteTypeChange} />
    )

    const departureButton = getByText('去程')
    fireEvent.click(departureButton)

    expect(mockOnRouteTypeChange).toHaveBeenCalledWith('departure')
  })

  it('应该展开和收起筛选面板', () => {
    const { getByText, queryByText } = render(<RouteFilter />)

    const filterButton = getByText('筛选')
    fireEvent.click(filterButton)

    expect(getByText('车辆类型')).toBeTruthy()
    expect(getByText('排序方式')).toBeTruthy()

    fireEvent.click(filterButton)

    expect(queryByText('车辆类型')).toBeNull()
    expect(queryByText('排序方式')).toBeNull()
  })

  it('应该处理车辆类型选择', () => {
    const mockOnVehicleTypeChange = jest.fn()
    const { getByText } = render(
      <RouteFilter onVehicleTypeChange={mockOnVehicleTypeChange} />
    )

    // 先展开筛选面板
    const filterButton = getByText('筛选')
    fireEvent.click(filterButton)

    const busButton = getByText('大巴拼车')
    fireEvent.click(busButton)

    expect(mockOnVehicleTypeChange).toHaveBeenCalledWith('bus')
  })

  it('应该处理排序选择', () => {
    const mockOnSortChange = jest.fn()
    const { getByText } = render(
      <RouteFilter onSortChange={mockOnSortChange} />
    )

    // 先展开筛选面板
    const filterButton = getByText('筛选')
    fireEvent.click(filterButton)

    const priceSortButton = getByText('价格')
    fireEvent.click(priceSortButton)

    expect(mockOnSortChange).toHaveBeenCalledWith('price', 'asc')

    // 再次点击应该切换排序方向
    fireEvent.click(priceSortButton)
    expect(mockOnSortChange).toHaveBeenCalledWith('price', 'desc')
  })

  it('应该显示当前筛选状态', () => {
    const { getByText } = render(
      <RouteFilter
        routeType="departure"
        vehicleType="bus"
        sortBy="price"
        sortOrder="desc"
      />
    )

    expect(getByText('去程')).toBeTruthy()
    expect(getByText('大巴拼车')).toBeTruthy()
    expect(getByText('价格↓')).toBeTruthy()
  })

  it('应该正确显示排序图标', () => {
    const { getByText } = render(
      <RouteFilter
        sortBy="departureTime"
        sortOrder="asc"
      />
    )

    // 展开筛选面板
    const filterButton = getByText('筛选')
    fireEvent.click(filterButton)

    const departureTimeSort = getByText('出发时间↑')
    expect(departureTimeSort).toBeTruthy()
  })

  it('应该处理全部选项的选择', () => {
    const mockOnRouteTypeChange = jest.fn()
    const { getByText } = render(
      <RouteFilter
        routeType="departure"
        onRouteTypeChange={mockOnRouteTypeChange}
      />
    )

    const allButton = getByText('全部')
    fireEvent.click(allButton)

    expect(mockOnRouteTypeChange).toHaveBeenCalledWith('all')
  })

  it('应该正确显示激活状态的样式', () => {
    const { getByText } = render(
      <RouteFilter routeType="departure" />
    )

    const departureButton = getByText('去程')
    const allButton = getByText('全部')

    // 验证去程按钮有激活样式
    expect(departureButton.className).toContain('bg-blue-500')
    expect(departureButton.className).toContain('text-white')

    // 验证全部按钮没有激活样式
    expect(allButton.className).toContain('bg-white')
    expect(allButton.className).toContain('text-gray-600')
  })

  it('应该支持自定义初始值', () => {
    const { getByText } = render(
      <RouteFilter
        routeType="return"
        vehicleType="charter"
        sortBy="price"
        sortOrder="desc"
      />
    )

    // 展开筛选面板
    const filterButton = getByText('筛选')
    fireEvent.click(filterButton)

    // 验证车辆类型选择正确
    const charterButton = getByText('包车')
    expect(charterButton.className).toContain('bg-green-500')

    // 验证排序选择正确
    const priceSortButton = getByText('价格↓')
    expect(priceSortButton.className).toContain('bg-orange-500')
  })
})