import * as React from "react"

import { create, ReactTestRenderer } from "react-test-renderer"
import { BookHighlighReview } from ".."
import { bookReview } from "./mock.data"
import { isArray } from "util"
import ReviewSliderComponent from "../ReviewSlider.component"
import { Carousel } from "../.."
import { Primary } from "../../Button"

declare global {
  namespace NodeJS {
    interface Global {
      window: any
    }
  }
}

// Simulate window resize event
const resizeEvent = document.createEvent("Event")
resizeEvent.initEvent("resize", true, true)
// create resizeTo function
global.window.resizeTo = (width, height) => {
  global.window.innerWidth = width || global.window.innerWidth
  global.window.innerHeight = width || global.window.innerHeight
  global.window.dispatchEvent(resizeEvent)
}

describe("Book Review test", () => {
  let t: ReactTestRenderer
  const onWriteReviewClickMock = jest.fn()
  beforeAll(() => {
    t = create(
      <BookHighlighReview
        onWriteReviewClick={onWriteReviewClickMock}
        bookId="test"
        review={bookReview}
      />
    )
  })

  it("should Highlight review component able to render", () => {
    create(<BookHighlighReview bookId="test" review={bookReview} />)
  })

  it("should not render carousel if page less than 1 page", () => {

    const r = create(<BookHighlighReview bookId="test" review={bookReview.slice(0, 1)} />)
    const c = r.root.findAll((node) => node.type === ( Carousel as any ))
    expect(c.length).toEqual(0)

  })

  it("should groupReviewsPerPage group review correctly", () => {
    const result = BookHighlighReview.groupReviewsPerPage(bookReview)
    for (const page of result) {
      expect(isArray(page)).toBeTruthy()
      expect(page.length).toEqual(3)
    }
  })

  it("should groupReviewPerPage emit 0 length array if no review", () => {
    const result = BookHighlighReview.groupReviewsPerPage([])
    expect(result.length).toEqual(0)
  })

  it("should render as carousel", () => {
    const { root } = t
    root.find((node) => {
      return (Carousel as any) === node.type
    })
  })

  it("should render 3 items per page on desktop 1174++px", function test() {
    window.resizeTo(1500, 1000)
    const root = t.root
    root.find((node) => {
      return (
        node.type === (ReviewSliderComponent as any) &&
        node.props.page[0].length === 3
      )
    })
  })

  it("should render 2 items per page on desktop size gt 1024 lt 1174", () => {
    window.resizeTo(1048, 1000)
    const { root } = t
    root.find((node) => {
      return (
        node.type === (ReviewSliderComponent as any) &&
        node.props.page[0].length === 2
      )
    })
  })

  it("should passing props onWriteReviewClick correctly to button", () => {

    const s = create(<BookHighlighReview onWriteReviewClick={onWriteReviewClickMock} bookId="test" review={[]} />)
    s.root.find((node) => {
      return (
        node.type === (Primary as any) &&
        node.props.onClick === onWriteReviewClickMock
      )
    })
  })

  it("should render 1 items per page on mobile size lte 1024", () => {
    window.resizeTo(1024, 1000)
    const { root } = t
    root.find((node) => {
      return (
        node.type === (ReviewSliderComponent as any) &&
        node.props.page[0].length === 1
      )
    })
  })
})