import React from 'react';
import {TextContainer, Scrollable} from 'components';
import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
import Pane from '../Pane';
import Section from '../../Section';

describe('<Pane />', () => {
  describe('fixed', () => {
    it('does not render content in a Scrollable when set to true', async () => {
      const Children = () => (
        <TextContainer>
          <p>Text</p>
        </TextContainer>
      );

      const popoverPane = await mountWithAppProvider(
        <Pane fixed>
          <Children />
        </Pane>,
      );

      expect(popoverPane.find(Scrollable)).toHaveLength(0);
    });

    it('renders content in a Scrollable when set to false', async () => {
      const Children = () => (
        <TextContainer>
          <p>Text</p>
        </TextContainer>
      );

      const popoverPane = await mountWithAppProvider(
        <Pane fixed={false}>
          <Children />
        </Pane>,
      );

      expect(popoverPane.find(Scrollable)).toHaveLength(1);
    });

    it('renders content in a Scrollable when unset', async () => {
      const Children = () => (
        <TextContainer>
          <p>Text</p>
        </TextContainer>
      );

      const popoverPane = await mountWithAppProvider(
        <Pane>
          <Children />
        </Pane>,
      );

      expect(popoverPane.find(Scrollable)).toHaveLength(1);
    });
  });

  describe('sectioned', () => {
    it('renders children in a Section when set to true', async () => {
      const Children = () => (
        <TextContainer>
          <p>Text</p>
        </TextContainer>
      );

      const popoverPane = await mountWithAppProvider(
        <Pane sectioned>
          <Children />
        </Pane>,
      );

      expect(popoverPane.find(Section)).toHaveLength(1);
    });

    it('does not render content in a Section when set to false', async () => {
      const Children = () => (
        <TextContainer>
          <p>Text</p>
        </TextContainer>
      );

      const popoverPane = await mountWithAppProvider(
        <Pane sectioned={false}>
          <Children />
        </Pane>,
      );

      expect(popoverPane.find(Section)).toHaveLength(0);
    });

    it('does not render content in a Section when unset', async () => {
      const Children = () => (
        <TextContainer>
          <p>Text</p>
        </TextContainer>
      );

      const popoverPane = await mountWithAppProvider(
        <Pane>
          <Children />
        </Pane>,
      );

      expect(popoverPane.find(Section)).toHaveLength(0);
    });
  });

  describe('onScrolledToBottom', () => {
    it('is set on the Scrollable when provided', async () => {
      const onScrolledToBottom = jest.fn();
      const Children = () => (
        <TextContainer>
          <p>Text</p>
        </TextContainer>
      );

      const popoverPane = await mountWithAppProvider(
        <Pane onScrolledToBottom={onScrolledToBottom}>
          <Children />
        </Pane>,
      );

      trigger(popoverPane.find(Scrollable).first(), 'onScrolledToBottom');

      expect(onScrolledToBottom).toHaveBeenCalled();
    });
  });
});
