import React, { Fragment } from 'react';

import { isNativeHtmlStructure } from '../isNativeHtmlStructure';

describe('isNativeHtmlStructure', () => {
  it('returns true for primitive values', () => {
    expect(isNativeHtmlStructure(true)).toBe(true);
    expect(isNativeHtmlStructure(false)).toBe(true);
    expect(isNativeHtmlStructure(null)).toBe(true);
    expect(isNativeHtmlStructure(undefined)).toBe(true);
    expect(isNativeHtmlStructure('string')).toBe(true);
    expect(isNativeHtmlStructure(42)).toBe(true);
    expect(isNativeHtmlStructure(0)).toBe(true);
    expect(isNativeHtmlStructure('')).toBe(true);
  });

  it('returns true for arrays of native HTML structures', () => {
    expect(isNativeHtmlStructure(['string', 42, null])).toBe(true);
    expect(isNativeHtmlStructure([<div key='1'>test</div>, 'text'])).toBe(true);
    expect(isNativeHtmlStructure([])).toBe(true);
  });

  it('returns false for arrays containing non-native structures', () => {
    const CustomComponent = () => <div>custom</div>;
    expect(isNativeHtmlStructure([<CustomComponent key='1' />])).toBe(false);
    expect(isNativeHtmlStructure(['text', <CustomComponent key='2' />])).toBe(false);
  });

  it('returns true for native HTML elements', () => {
    expect(isNativeHtmlStructure(<div>content</div>)).toBe(true);
    expect(isNativeHtmlStructure(<span>text</span>)).toBe(true);
    expect(isNativeHtmlStructure(<button>click</button>)).toBe(true);
  });

  it('returns true for nested native HTML elements', () => {
    expect(
      isNativeHtmlStructure(
        <div>
          <span>text</span>
          <button>click</button>
        </div>
      )
    ).toBe(true);
  });

  it('returns true for native HTML elements with no children', () => {
    expect(isNativeHtmlStructure(<div />)).toBe(true);
    expect(isNativeHtmlStructure(<input />)).toBe(true);
  });

  it('returns true for React fragments with native content', () => {
    expect(
      isNativeHtmlStructure(
        <Fragment>
          <div>test</div>
          text
        </Fragment>
      )
    ).toBe(true);

    expect(
      isNativeHtmlStructure(
        <>
          <span>content</span>
          42
        </>
      )
    ).toBe(true);
  });

  it('returns true for empty React fragments', () => {
    expect(isNativeHtmlStructure(<Fragment />)).toBe(true);
    expect(isNativeHtmlStructure(<></>)).toBe(true);
  });

  it('returns false for fragments containing custom components', () => {
    const CustomComponent = () => <div>custom</div>;
    expect(
      isNativeHtmlStructure(
        <Fragment>
          <CustomComponent />
        </Fragment>
      )
    ).toBe(false);
  });

  it('returns false for custom function components', () => {
    const CustomComponent = () => <div>custom</div>;
    expect(isNativeHtmlStructure(<CustomComponent />)).toBe(false);
  });

  it('returns false for custom class components', () => {
    class CustomComponent extends React.Component {
      render() {
        return <div>custom</div>;
      }
    }
    expect(isNativeHtmlStructure(<CustomComponent />)).toBe(false);
  });

  it('returns false for components with props', () => {
    const CustomComponent = ({ text, ...rest }: { text: string }) => <div {...rest}>{text}</div>;
    expect(isNativeHtmlStructure(<CustomComponent text='test' />)).toBe(false);
  });

  it('returns false for other symbol types', () => {
    const mockElement = {
      type: Symbol.for('react.provider'),
      props: { children: 'test' },
      key: null,
      ref: null,
    };

    expect(isNativeHtmlStructure(mockElement as unknown as React.ReactNode)).toBe(false);
  });

  it('returns false for non-React element objects', () => {
    expect(isNativeHtmlStructure({ not: 'a react element' } as unknown as React.ReactNode)).toBe(false);
    expect(isNativeHtmlStructure({ type: 'div' } as unknown as React.ReactNode)).toBe(false);
  });

  it('handles deeply nested native structures', () => {
    expect(
      isNativeHtmlStructure(
        <div>
          <section>
            <article>
              <h1>Title</h1>
              <p>
                Paragraph with <strong>bold</strong> text
              </p>
              <ul>
                <li>Item 1</li>
                <li>Item 2</li>
              </ul>
            </article>
          </section>
        </div>
      )
    ).toBe(true);
  });

  it('returns false for mixed native and custom components', () => {
    const CustomComponent = () => <div>custom</div>;
    expect(
      isNativeHtmlStructure(
        <div>
          <span>native</span>
          <CustomComponent />
        </div>
      )
    ).toBe(false);
  });

  it('handles nested arrays', () => {
    expect(isNativeHtmlStructure([<div key='1'>test</div>, ['nested', 'array', 42]])).toBe(true);

    const CustomComponent = () => <div>custom</div>;
    expect(isNativeHtmlStructure([<div key='1'>test</div>, [<CustomComponent key='2' />]])).toBe(false);
  });

  it('returns false for unknown object types', () => {
    const unknownType = {};
    expect(isNativeHtmlStructure(unknownType as unknown as React.ReactNode)).toBe(false);
  });
});