import { renderHook } from '@testing-library/react';

import type { ItemContext } from '../../types';

import { PageThemeProvider, usePageTheme } from '.';

const renderUsePageTheme = (itemContext: ItemContext | undefined) =>
  renderHook(() => usePageTheme(), {
    wrapper: ({ children }) => (
      <PageThemeProvider itemContext={itemContext}>
        {children}
      </PageThemeProvider>
    ),
  });

describe('usePageTheme', () => {
  describe('gradientOpacity', () => {
    it('falls back to 100 when itemContext is undefined', () => {
      const { result } = renderUsePageTheme(undefined);

      expect(result.current.gradientOpacity).toBe(100);
    });

    it('falls back to 100 when itemContext has no THEME addon', () => {
      const itemContext = { addons: {} } as unknown as ItemContext;

      const { result } = renderUsePageTheme(itemContext);

      expect(result.current.gradientOpacity).toBe(100);
    });

    it('falls back to 100 for legacy pages where THEME addon has no gradientOpacity (backward compat)', () => {
      const itemContext = {
        addons: { THEME: { backgroundColor: '#abc' } },
      } as unknown as ItemContext;

      const { result } = renderUsePageTheme(itemContext);

      expect(result.current.gradientOpacity).toBe(100);
    });

    it('honors an explicit gradientOpacity of 0 (uses ?? not ||)', () => {
      const itemContext = {
        addons: { THEME: { gradientOpacity: 0 } },
      } as unknown as ItemContext;

      const { result } = renderUsePageTheme(itemContext);

      expect(result.current.gradientOpacity).toBe(0);
    });

    it('returns the configured gradientOpacity value (42)', () => {
      const itemContext = {
        addons: { THEME: { gradientOpacity: 42 } },
      } as unknown as ItemContext;

      const { result } = renderUsePageTheme(itemContext);

      expect(result.current.gradientOpacity).toBe(42);
    });
  });

  describe('gradientColor', () => {
    it.each([
      {
        description: 'uses default theme when THEME addon is absent',
        themeAddon: undefined,
        expected: 'rgba(0, 0, 0, 1)',
      },
      {
        description:
          'is fully opaque when gradientOpacity is omitted (defaults to 100)',
        themeAddon: { backgroundColor: '#ff0000' },
        expected: 'rgba(255, 0, 0, 1)',
      },
      {
        description: 'is fully transparent at 0% opacity',
        themeAddon: { backgroundColor: '#ff0000', gradientOpacity: 0 },
        expected: 'rgba(255, 0, 0, 0)',
      },
      {
        description: 'scales alpha linearly at 50% opacity',
        themeAddon: { backgroundColor: '#ff0000', gradientOpacity: 50 },
        expected: 'rgba(255, 0, 0, 0.5)',
      },
    ])('$description', ({ themeAddon, expected }) => {
      const itemContext = {
        addons: themeAddon ? { THEME: themeAddon } : {},
      } as unknown as ItemContext;

      const { result } = renderUsePageTheme(itemContext);

      expect(result.current.gradientColor).toBe(expected);
    });
  });
});