/** @jsx jsx */

import { SVGAttributes, forwardRef } from 'react';

import { ResponsiveProp, jsx } from '@elemental-ui-alpha/core';
import {
  ElementalNamedTheme,
  useElementalTheme,
} from '@elemental-ui-alpha/theme';
import { useMediaQuery } from '@elemental-ui-alpha/utils';

export type IconProps = SVGAttributes<SVGSVGElement> & {
  /** The color key for the SVG fill property. */
  fill?: ResponsiveProp<keyof ElementalNamedTheme['foreground']> | string;
  /** The size key for the icon. */
  size?: ResponsiveProp<keyof typeof sizeMap> | number;
};

const sizeMap = {
  xsmall: 8,
  small: 16,
  medium: 24,
  large: 32,
};

export const createIcon = (
  children: React.ReactNode,
  name: string,
  viewBox: string
) => {
  let Icon = forwardRef<SVGSVGElement, IconProps>(
    ({ size = 'medium', fill = 'currentColor', ...props }, ref) => {
      const theme = useElementalTheme();
      const { mq, mapResponsiveProp } = useMediaQuery();
      const resolvedSize =
        typeof size === 'number' ? size : mapResponsiveProp(size, sizeMap);
      const resolvedColor =
        fill in theme.foreground
          ? mapResponsiveProp(
              fill as keyof typeof theme.foreground,
              theme.foreground
            )
          : fill;

      return (
        <svg
          aria-hidden="true"
          focusable="false"
          css={mq({ fill: resolvedColor })}
          height={`${resolvedSize}px`}
          width={`${resolvedSize}px`}
          ref={ref}
          role="img"
          viewBox={viewBox}
          xmlns="http://www.w3.org/2000/svg"
          {...props}
        >
          {children}
        </svg>
      );
    }
  );
  Icon.displayName = name;
  return Icon;
};