import React from 'react'
import { render, fireEvent, act } from '@testing-library/react'
import ShareLinkButton from '../ShareLinkButton'
import { LiveBlogPost } from '../index'

const mockClipboardWrite = jest.fn(() => Promise.resolve())
Object.defineProperty(navigator, 'clipboard', {
  value: { writeText: mockClipboardWrite },
  configurable: true,
})

describe('Share Link button', () => {
  const defaultProps = {
    postId: '0cb263ac-3843-4a22-976a-fcee9b8ba7de',
    articleUrl: 'https://ft.com/content/e46f26ed-27d1-4291-9709-e1031ba7e781',
  }

  beforeEach(() => {
    mockClipboardWrite.mockClear()
    jest.useFakeTimers()
  })

  afterEach(() => {
    jest.runOnlyPendingTimers()
    jest.useRealTimers()
  })

  it('should render share link button', () => {
    const { container } = render(<ShareLinkButton {...defaultProps} />)
    expect(
      container.querySelector('button[data-component="share-link-button"]')
    ).toBeTruthy()
  })

  it('should construct the correct URL with query parameter and post hash', async () => {
    const { container } = render(<ShareLinkButton {...defaultProps} />)
    const button = container.querySelector(
      'button[data-component="share-link-button"]'
    )

    await act(async () => {
      button && fireEvent.click(button)
    })

    expect(mockClipboardWrite).toHaveBeenCalledWith(
      'https://ft.com/content/e46f26ed-27d1-4291-9709-e1031ba7e781?feature=blog-post-sharing#post-0cb263ac-3843-4a22-976a-fcee9b8ba7de'
    )
  })

  // it('should prevent default link behavior', () => {
  //   const { container } = render(<ShareLinkButton {...defaultProps} />)
  //   const button = container.querySelector(
  //     'button[data-component="share-link-button"]'
  //   )
  //   const event = new MouseEvent('click', { bubbles: true, cancelable: true })
  //   const preventDefaultSpy = jest.spyOn(event, 'preventDefault')
  //   button?.dispatchEvent(event)
  //   expect(preventDefaultSpy).toHaveBeenCalled()
  // })

  it('should show "Link copied" after clicking', async () => {
    const { container } = render(<ShareLinkButton {...defaultProps} />)
    const button = container.querySelector(
      'button[data-component="share-link-button"]'
    )

    await act(async () => {
      button && fireEvent.click(button)
    })

    expect(container.querySelector('[data-tooltip="show"]')).toBeTruthy()
  })

  it('should hide "Link copied" message after 8 seconds', async () => {
    const { container } = render(<ShareLinkButton {...defaultProps} />)
    const button = container.querySelector(
      'button[data-component="share-link-button"]'
    )

    await act(async () => {
      button && fireEvent.click(button)
    })

    act(() => {
      jest.advanceTimersByTime(8000)
    })

    expect(container.querySelector('[data-tooltip="hide"]')).toBeTruthy()
  })
})

describe('LiveBlogPost meta container', () => {
  const defaultProps = {
    id: '00000000-0000-0000-0000-000000000000',
    postId: '00000000-0000-0000-0000-000000000000',
    title: 'Sample Live Blog Post',
    content: 'This is a sample live blog post.',
    bodyHTML: '<p>This is a sample live blog post.</p>',
    body: {},
    publishedTimestamp: '2024-06-01T12:00:00Z',
    publishedDate: '2024-06-01T12:00:00Z',
    isPinned: true,
    articleUrl: 'https://ft.com/content/00000000-0000-0000-0000-000000000000',
    showShareButtons: false,
    showShareLinkButton: false,
    byline: { tree: {} },
    ad: null,
    indicators: {},
    authors: [],
  }
  it('should hide the timestamp on pinned posts', () => {
    const { container } = render(
      <LiveBlogPost {...defaultProps} isPinned={true} />
    )
    expect(
      container.querySelector('.x-live-blog-post__timestamp-container')
    ).toBeFalsy()
  })

  it('should show the timestamp on non-pinned posts', () => {
    const { container } = render(
      <LiveBlogPost {...defaultProps} isPinned={false} />
    )
    expect(
      container.querySelector('.x-live-blog-post__timestamp-container')
    ).toBeTruthy()
  })

  it("should render the editor's pick label when the post is pinned", () => {
    const { container } = render(
      <LiveBlogPost {...defaultProps} isPinned={true} />
    )
    expect(
      container.querySelector('.x-live-blog-post__label')?.textContent
    ).toBe("Editor's pick")
  })

  it("should not render the editor's pick label when the post is not pinned", () => {
    const { container } = render(
      <LiveBlogPost {...defaultProps} isPinned={false} />
    )
    expect(
      container.querySelector('.x-live-blog-post__label')?.textContent
    ).not.toBe("Editor's pick")
  })
})