import React from 'react'
import renderer from 'react-test-renderer'
import { ContentLayout } from '../index'

describe('ContentLayout', () => {
  it('renders full-grid layout with container correctly', () => {
    const tree = renderer
      .create(
        <ContentLayout dataLayout="full-grid" dataComponent="clip-set">
          <div>Test content</div>
        </ContentLayout>
      )
      .toJSON()

    expect(tree).toMatchSnapshot()
  })

  it('renders mid-grid layout with container correctly', () => {
    const tree = renderer
      .create(
        <ContentLayout dataLayout="mid-grid" dataComponent="clip-set">
          <div>Test content</div>
        </ContentLayout>
      )
      .toJSON()

    expect(tree).toMatchSnapshot()
  })

  it('renders in-line layout with container correctly', () => {
    const tree = renderer
      .create(
        <ContentLayout dataLayout="in-line" dataComponent="clip-set">
          <div>Test content</div>
        </ContentLayout>
      )
      .toJSON()

    expect(tree).toMatchSnapshot()
  })

  it('renders inset-left layout with container correctly', () => {
    const tree = renderer
      .create(
        <ContentLayout dataLayout="inset-left" dataComponent="clip-set">
          <div>Test content</div>
        </ContentLayout>
      )
      .toJSON()

    expect(tree).toMatchSnapshot()
  })

  it('renders inset-right layout with container correctly', () => {
    const tree = renderer
      .create(
        <ContentLayout dataLayout="inset-right" dataComponent="clip-set">
          <div>Test content</div>
        </ContentLayout>
      )
      .toJSON()

    expect(tree).toMatchSnapshot()
  })

  describe('Edge cases', () => {
    it('handles empty children', () => {
      const tree = renderer
        .create(
          <ContentLayout dataLayout="full-grid" dataComponent="clip-set">
            <div></div>
          </ContentLayout>
        )
        .toJSON()

      expect(tree).toMatchSnapshot()
    })

    it('handles null children', () => {
      const tree = renderer
        .create(
          <ContentLayout dataLayout="full-grid" dataComponent="clip-set">
            <div>{null}</div>
          </ContentLayout>
        )
        .toJSON()

      expect(tree).toMatchSnapshot()
    })

    it('handles conditional children', () => {
      const showContent = true
      const tree = renderer
        .create(
          <ContentLayout dataLayout="full-grid" dataComponent="clip-set">
            <div>{showContent && <div>Conditional content</div>}</div>
            <div>{!showContent && <div>Alternative content</div>}</div>
          </ContentLayout>
        )
        .toJSON()

      expect(tree).toMatchSnapshot()
    })
  })
})