import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react';
import FeedBack from '.';

describe('FeedBack Component', () => {
  it('renders correctly with initial state', () => {
    const { getByText } = render(
      <FeedBack pageId={123} casinoTitle="Wildz" trueVotes={10} falseVotes={5} />
    );

    expect(getByText('Would you recomend Wildz ?')).toBeInTheDocument();
  });

  it('handles like button click', async () => {
    const { container, getByText } = render(
      <FeedBack pageId={123} casinoTitle="Wildz" trueVotes={10} falseVotes={5} />
    );

    const detailsText = `10 of 15 users recommend Wildz`;
    expect(container.querySelector('.details')).toHaveTextContent(detailsText);

    const likeButton = container.querySelector('.modalChildren .like');

    await waitFor(() => {
      fireEvent.click(likeButton);
      const updtedDetailsText = `11 of 16 users recommend Wildz`;

      expect(getByText('Thanks for your feedback!')).toBeInTheDocument();
      expect(container.querySelector('.details')).toHaveTextContent(updtedDetailsText);
      expect(container.querySelector('.userCountNumber')).toHaveTextContent(11);
    });
  });

  it('handles dislike button click', async () => {
    const { getByText, container } = render(
      <FeedBack pageId={123} casinoTitle="Wildz" trueVotes={10} falseVotes={5} />
    );

    const detailsText = `10 of 15 users recommend Wildz`;
    expect(container.querySelector('.details')).toHaveTextContent(detailsText);

    const likeButton = container.querySelector('.modalChildren .dislike');

    await waitFor(() => {
      fireEvent.click(likeButton);
      const updtedDetailsText = `10 of 16 users recommend Wildz`;

      expect(getByText('Thanks for your feedback!')).toBeInTheDocument();
      expect(container.querySelector('.details')).toHaveTextContent(updtedDetailsText);
      expect(container.querySelector('.userCountNumber')).toHaveTextContent(6);
    });
  });
});
