import AISpinner from '@design-system/AI/AISpinner';
import { SvgIcon } from '@mui/material';

import { aiTwinkleKeyframes } from '../constants';

import { AI_ACCENT_CLASS, AI_PENCIL, AI_PHOTO } from './constants';
import { type AIIconProps } from './types';

/** Twinkle the sparkle accents only while the parent button is hovered. */
const ACCENT_HOVER =
  `.MuiButtonBase-root:hover:not(.Mui-disabled) & .${AI_ACCENT_CLASS},` +
  `.MuiFab-root:hover:not(.Mui-disabled) & .${AI_ACCENT_CLASS}`;

export const AIIcon = ({
  name = 'sparkles',
  size,
  color = 'currentColor',
  sx,
}: AIIconProps) => {
  if (name === 'sparkles') {
    return (
      <AISpinner
        size={size}
        color={color}
        sx={sx}
      />
    );
  }

  const glyph = name === 'ai-pencil' ? AI_PENCIL : AI_PHOTO;

  return (
    <SvgIcon
      viewBox="0 0 24 24"
      sx={{
        color,
        ...(size ? { fontSize: size, width: size, height: size } : {}),
        [`& .${AI_ACCENT_CLASS}`]: {
          transformOrigin: 'center',
          transformBox: 'fill-box',
        },
        [ACCENT_HOVER]: {
          animation: `${aiTwinkleKeyframes} 1.4s ease-in-out infinite`,
          '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
        },
        ...sx,
      }}
    >
      {glyph.paths.map(d => (
        <path
          key={d}
          d={d}
          fill="currentColor"
          fillRule="evenodd"
          clipRule="evenodd"
          stroke="none"
        />
      ))}
      {glyph.sparkles.map(d => (
        <path
          key={d}
          className={AI_ACCENT_CLASS}
          d={d}
          fill="currentColor"
          fillRule="evenodd"
          clipRule="evenodd"
          stroke="none"
        />
      ))}
    </SvgIcon>
  );
};

export type { AIIconProps };