'use client';

import clsx from 'clsx';
import { useSearchParams } from 'next/navigation';

import { colorVar } from '@/utils/utils';

const EMBED_CSS_VARIABLES = {
  '--color-embed-bg-a': colorVar('background/secondary'),
  '--color-embed-bg-b': colorVar('background/primary'),
  '--color-embed-slider-rail': colorVar('foreground/inactive'),
  '--color-embed-slider-progress': colorVar('pink/500'),
  '--color-embed-slider-thumb': colorVar('foreground/primary'),
  '--color-embed-slider-thumb-disabled': colorVar('foreground/inactive'),
  '--color-embed-text-primary': colorVar('foreground/primary'),
  '--color-embed-text-secondary': colorVar('foregrounmd/secondary'),
  '--color-embed-button-bg-hover': colorVar('foreground/primary', 0.8),
  '--color-embed-button-bg': colorVar('foreground/primary'),
  '--color-embed-button-fg': colorVar('background/secondary'),
} as React.CSSProperties;

const EMBED_THEMES: Record<
  string,
  { className?: string; style?: React.CSSProperties }
> = {
  dark: {
    className: 'theme-dark',
    style: EMBED_CSS_VARIABLES,
  },
  light: {
    className: 'theme-light',
    style: EMBED_CSS_VARIABLES,
  },
};

const EmbedClientLayout = ({ children }: { children: React.ReactNode }) => {
  const searchParams = useSearchParams();
  const theme = searchParams.get('theme');

  const { className: themeClassName, style: themeStyle } =
    theme && theme in EMBED_THEMES ? EMBED_THEMES[theme] : {};

  return (
    <div
      className={clsx(
        '@container flex min-h-full w-full flex-col items-stretch justify-stretch bg-black',
        // X-specific workaround because they don't properly set the <iframe> height on mobile
        '[@media(max-width:474px)_and_(min-height:150px)_and_(max-height:150px)]:min-h-0',
        '[@media(max-width:474px)_and_(min-height:150px)_and_(max-height:150px)]:h-[calc(100vw*108/342)]',
        themeClassName
      )}
      style={themeStyle}
    >
      {children}
    </div>
  );
};

export default EmbedClientLayout;