import { render, screen } from '@testing-library/react';

import PromoCard, { PromoCardProps } from './PromoCard';
import PromoCardGroup, { PromoCardGroupProps } from './PromoCardGroup';

describe('PromoCardGroup', () => {
  const defaultCardProps: PromoCardProps = {
    title: 'Test Card',
    description: 'Test Description',
    imageSource: 'https://via.placeholder.com/150',
    type: 'radio',
  };

  const defaultProps = {
    testId: 'test-promo-card-group',
    children: [
      <PromoCard
        key="radio-1"
        {...defaultCardProps}
        testId="test-1"
        value="radio-1"
        id="radio-1"
      />,
      <PromoCard
        key="radio-2"
        {...defaultCardProps}
        testId="test-2"
        value="radio-2"
        id="radio-2"
      />,
    ],
  };

  let rerenderPromoCardGroup: (props?: PromoCardGroupProps) => void;

  beforeEach(() => {
    const { rerender } = render(<PromoCardGroup {...defaultProps} />);

    rerenderPromoCardGroup = (props?: PromoCardGroupProps) => {
      rerender(<PromoCardGroup {...defaultProps} {...props} />);
    };
  });

  it('renders', () => {
    const props = {
      ...defaultProps,
      children: [
        <PromoCard
          key="radio-3"
          {...defaultCardProps}
          type="checkbox"
          testId="test-3"
          value="radio-3"
        />,
        <PromoCard
          key="radio-4"
          {...defaultCardProps}
          type="checkbox"
          testId="test-4"
          value="radio-4"
        />,
      ],
    };
    expect(screen.getByTestId('test-promo-card-group')).toBeInTheDocument();
    expect(screen.getByTestId('test-promo-card-group')).toHaveClass('np-CardGroup');
    expect(screen.getByRole('radiogroup')).toBeInTheDocument();

    // Change children
    rerenderPromoCardGroup(props);

    expect(screen.getByTestId('test-4')).toBeInTheDocument();
  });

  it('sets the `defaultValue` for the group', () => {
    const props = {
      ...defaultProps,
      defaultChecked: 'radio-1',
    };

    expect(screen.getByTestId('test-1')).not.toHaveClass('is-checked');

    // Change children
    rerenderPromoCardGroup(props);

    expect(screen.getByTestId('test-1')).toHaveClass('is-checked');
  });

  it('not to render as a `radiogroup` if we have a mix of PromoCard types', () => {
    const props = {
      ...defaultProps,
      children: [
        <PromoCard
          key="radio-3"
          {...defaultCardProps}
          type="checkbox"
          testId="test-3"
          value="radio-3"
        />,
        <PromoCard
          key="radio-4"
          {...defaultCardProps}
          type="checkbox"
          testId="test-4 "
          value="radio-4"
        />,
      ],
    };

    expect(screen.getByRole('radiogroup')).toBeInTheDocument();

    // Change children
    rerenderPromoCardGroup(props);

    expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
    expect(screen.getByTestId('test-4')).toBeInTheDocument();
  });

  it('applies `is-disabled` class to all children when isDisabled is true', () => {
    const props = {
      ...defaultProps,
      isDisabled: true,
    };

    expect(screen.getByTestId('test-1')).not.toHaveClass('is-disabled');
    expect(screen.getByTestId('test-2')).not.toHaveClass('is-disabled');

    // Change children
    rerenderPromoCardGroup(props);

    expect(screen.getByTestId('test-1')).toHaveClass('is-disabled');
    expect(screen.getByTestId('test-2')).toHaveClass('is-disabled');
  });
});