import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import {
  SkeletonLine,
  SkeletonHeadline,
  SkeletonPrice,
  SkeletonButton
} from '../skeletonStyles';

describe('Skeleton Styles', () => {
  describe('SkeletonLine', () => {
    it('renders with default width', () => {
      const { container } = render(<SkeletonLine />);
      const element = container.firstChild;
      expect(element).toBeInTheDocument();
    });

    it('accepts custom width prop', () => {
      const { container } = render(<SkeletonLine width="80px" />);
      const element = container.firstChild;
      expect(element).toBeInTheDocument();
    });

    it('accepts custom marginBottom prop', () => {
      const { container } = render(<SkeletonLine marginBottom="4px" />);
      const element = container.firstChild;
      expect(element).toBeInTheDocument();
    });

    it('accepts both width and marginBottom props', () => {
      const { container } = render(
        <SkeletonLine width="60px" marginBottom="8px" />
      );
      const element = container.firstChild;
      expect(element).toBeInTheDocument();
    });

    it('renders as a div element', () => {
      const { container } = render(<SkeletonLine />);
      const element = container.firstChild;
      if (element) {
        expect(element.nodeName).toBe('DIV');
      }
    });

    it('applies skeleton styling', () => {
      const { container } = render(<SkeletonLine />);
      const element = container.firstChild as HTMLElement;
      expect(element.className).toMatch(/sc-/);
    });
  });

  describe('SkeletonHeadline', () => {
    it('renders correctly', () => {
      const { container } = render(<SkeletonHeadline />);
      const element = container.firstChild;
      expect(element).toBeInTheDocument();
    });

    it('renders as a div element', () => {
      const { container } = render(<SkeletonHeadline />);
      const element = container.firstChild;
      if (element) {
        expect(element.nodeName).toBe('DIV');
      }
    });

    it('has styled component class', () => {
      const { container } = render(<SkeletonHeadline />);
      const element = container.firstChild as HTMLElement;
      expect(element.className).toMatch(/sc-/);
    });

    it('accepts className prop', () => {
      const { container } = render(<SkeletonHeadline className="custom" />);
      const element = container.firstChild as HTMLElement;
      expect(element).toHaveClass('custom');
    });
  });

  describe('SkeletonPrice', () => {
    it('renders correctly', () => {
      const { container } = render(<SkeletonPrice />);
      const element = container.firstChild;
      expect(element).toBeInTheDocument();
    });

    it('renders as a div element', () => {
      const { container } = render(<SkeletonPrice />);
      const element = container.firstChild;
      if (element) {
        expect(element.nodeName).toBe('DIV');
      }
    });

    it('has styled component class', () => {
      const { container } = render(<SkeletonPrice />);
      const element = container.firstChild as HTMLElement;
      expect(element.className).toMatch(/sc-/);
    });

    it('can be used multiple times', () => {
      const { container } = render(
        <>
          <SkeletonPrice />
          <SkeletonPrice />
          <SkeletonPrice />
        </>
      );
      const elements = container.querySelectorAll('div');
      expect(elements.length).toBe(3);
    });
  });

  describe('SkeletonButton', () => {
    it('renders correctly', () => {
      const { container } = render(<SkeletonButton as="div" />);
      const element = container.firstChild;
      expect(element).toBeInTheDocument();
    });

    it('renders as div when specified', () => {
      const { container } = render(<SkeletonButton as="div" />);
      const element = container.firstChild;
      if (element) {
        expect(element.nodeName).toBe('DIV');
      }
    });

    it('has styled component class', () => {
      const { container } = render(<SkeletonButton as="div" />);
      const element = container.firstChild as HTMLElement;
      expect(element.className).toMatch(/sc-/);
    });

    it('accepts additional props', () => {
      const { container } = render(
        <SkeletonButton as="div" data-testid="skeleton-button" />
      );
      const element = container.firstChild;
      expect(element).toHaveAttribute('data-testid', 'skeleton-button');
    });

    it('is not interactive', () => {
      const { container } = render(<SkeletonButton as="div" />);
      const element = container.firstChild;
      if (element) {
        expect(element.nodeName).toBe('DIV');
      }
    });
  });

  describe('Skeleton Components Integration', () => {
    it('all skeleton components render together', () => {
      const { container } = render(
        <div>
          <SkeletonHeadline />
          <SkeletonLine width="80px" />
          <SkeletonPrice />
          <SkeletonButton as="div" />
        </div>
      );

      // Verify all components are present (4 skeleton components + 1 wrapper div = 5 divs minimum)
      const elements = container.querySelectorAll('div');
      expect(elements.length).toBeGreaterThanOrEqual(5);
    });

    it('skeleton components maintain consistent styling', () => {
      const { container } = render(
        <div>
          <SkeletonLine />
          <SkeletonHeadline />
          <SkeletonPrice />
        </div>
      );

      const styledElements = container.querySelectorAll('[class*="sc-"]');
      expect(styledElements.length).toBeGreaterThanOrEqual(3);
    });

    it('skeleton components are div elements by default', () => {
      const { container } = render(
        <div>
          <SkeletonLine />
          <SkeletonHeadline />
          <SkeletonPrice />
        </div>
      );

      const divs = Array.from(container.querySelectorAll('div'));
      expect(divs.length).toBeGreaterThanOrEqual(4);
    });

    it('props are correctly applied to skeleton components', () => {
      const { container } = render(
        <div>
          <SkeletonLine width="50px" marginBottom="10px" />
          <SkeletonButton as="div" className="btn-skeleton" />
        </div>
      );

      const elements = container.querySelectorAll('div');
      expect(elements.length).toBeGreaterThanOrEqual(2);
    });
  });

  describe('Styled Components Structure', () => {
    it('SkeletonLine has correct structure', () => {
      const { container } = render(<SkeletonLine />);
      expect(container.firstChild).toBeTruthy();
    });

    it('SkeletonHeadline has correct structure', () => {
      const { container } = render(<SkeletonHeadline />);
      expect(container.firstChild).toBeTruthy();
    });

    it('SkeletonPrice has correct structure', () => {
      const { container } = render(<SkeletonPrice />);
      expect(container.firstChild).toBeTruthy();
    });

    it('SkeletonButton has correct structure', () => {
      const { container } = render(<SkeletonButton as="div" />);
      expect(container.firstChild).toBeTruthy();
    });
  });

  describe('Props and Variants', () => {
    it('SkeletonLine with different widths', () => {
      const { rerender, container } = render(<SkeletonLine width="20px" />);
      expect(container.firstChild).toBeInTheDocument();

      rerender(<SkeletonLine width="100px" />);
      expect(container.firstChild).toBeInTheDocument();

      rerender(<SkeletonLine width="50%" />);
      expect(container.firstChild).toBeInTheDocument();
    });

    it('SkeletonLine with different margins', () => {
      const { rerender, container } = render(
        <SkeletonLine marginBottom="2px" />
      );
      expect(container.firstChild).toBeInTheDocument();

      rerender(<SkeletonLine marginBottom="8px" />);
      expect(container.firstChild).toBeInTheDocument();

      rerender(<SkeletonLine marginBottom="16px" />);
      expect(container.firstChild).toBeInTheDocument();
    });
  });
});