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

const mockOnSelect = jest.fn();
const mockOnDrillDown = jest.fn();
const previewModalState = jest.fn();

const defaultProps: any = {
  id: '123',
  selected: false,
  label: 'My Resource',
  type: 'site',
  childCount: 0,
  previewModalState: previewModalState,
  onSelect: mockOnSelect,
  onDrillDown: mockOnDrillDown,
  className: '',
};

describe('ResourceItem', () => {
  it('should render the component with the correct label', () => {
    const { getByText } = render(<ResourceItem {...defaultProps} />);
    const labelElement = getByText('My Resource');

    expect(labelElement).toBeInTheDocument();
  });

  it('should call the onSelect function when the button is pressed', () => {
    const { getByRole } = render(<ResourceItem {...defaultProps} />);
    const buttonElement = getByRole('button');
    fireEvent.click(buttonElement);

    expect(mockOnSelect).toHaveBeenCalledTimes(1);
  });

  it('should call the onDrillDown function when the drill down button is pressed', () => {
    const { getByLabelText } = render(<ResourceItem {...defaultProps} childCount={1} />);
    const drillDownButtonElement = getByLabelText('Drill down to My Resource children');
    fireEvent.click(drillDownButtonElement);

    expect(mockOnDrillDown).toHaveBeenCalledTimes(1);
  });

  it('should disable the button when the allowedTypes prop is not in the list of allowedItems', () => {
    const { getByRole } = render(<ResourceItem {...defaultProps} allowedTypes={['page']} />);
    const buttonElement = getByRole('button');

    expect(buttonElement).toBeDisabled();
  });

  it('should not disable the button when the allowedTypes prop is in the list of allowedItems', () => {
    const { getByRole } = render(<ResourceItem {...defaultProps} allowedTypes={['site']} />);
    const buttonElement = getByRole('button');

    expect(buttonElement).not.toBeDisabled();
  });

  it('should not disable the button when the allowedTypes is undefined', () => {
    const { getByRole } = render(<ResourceItem {...defaultProps} />);
    const buttonElement = getByRole('button');

    expect(buttonElement).not.toBeDisabled();
  });

  it('should handle converting snake_case types to camelCase', () => {
    const props = {
      ...defaultProps,
      type: 'page_standard',
    };

    const { getByRole } = render(<ResourceItem {...props} allowedTypes={['pageStandard']} />);
    const buttonElement = getByRole('button');

    expect(buttonElement).not.toBeDisabled();
  });

  it('should still handle camelCase types', () => {
    const props = {
      ...defaultProps,
      type: 'pageStandard',
    };

    const { getByRole } = render(<ResourceItem {...props} allowedTypes={['pageStandard']} />);
    const buttonElement = getByRole('button');

    expect(buttonElement).not.toBeDisabled();
  });
});