import { mapWithResponsive } from '@/utils/map-with-responsive';
import {
  Heading as RadixHeading,
  type HeadingProps as RadixHeadingProps,
} from '@radix-ui/themes';
import type { Breakpoint, Responsive } from '@radix-ui/themes/props';
import { useMemo } from 'react';

export { Heading as RadixHeading } from '@radix-ui/themes';
type HeadingVariant =
  | 'heading1'
  | 'heading2'
  | 'heading3'
  | 'heading4'
  | 'heading5';
export type HeadingProps = RadixHeadingProps & {
  variant?: Responsive<HeadingVariant>;
};

type HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';

const mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {
  switch (variant) {
    case 'heading1':
      return '7';
    case 'heading2':
      return '6';
    case 'heading3':
      return '5';
    case 'heading4':
      return '4';
    case 'heading5':
      return '3';
    default:
      return undefined;
  }
};

export function Heading(props: HeadingProps): React.ReactElement {
  const { size, children, variant, ...rest } = props;
  const radixSize = useMemo<RadixHeadingProps['size']>(() => {
    return variant
      ? mapWithResponsive({
          value: variant,
          mapFn: mapVariant,
        })
      : size;

    // if (typeof variant === 'string') {
    //   return mapVariant(variant);
    // }
    // if (typeof variant === 'object') {
    //   const newObj: Partial<Record<Breakpoint, HeadingSize>> = {};
    //   let key: Breakpoint;
    //   for (key in variant) {
    //     newObj[key] = mapVariant(variant[key]);
    //   }
    //   return newObj;
    // }
    // return size;
  }, [size, variant]);

  return (
    <RadixHeading {...rest} size={radixSize}>
      {children}
    </RadixHeading>
  );
}
