import React, { useEffect, useState } from 'react';
import styled from 'styled-components';

import type { IconProps } from '@redocly/theme/icons/types';

import { getCssColorVariable } from '@redocly/theme/core/utils';

export interface AiStarsGradientIconProps extends IconProps {
  background?: string;
  borderRadius?: string;
  padding?: string;
  margin?: string;
}

const Icon = (props: AiStarsGradientIconProps) => {
  const { color = '', background, borderRadius, padding, margin, ...restProps } = props;

  const [resolvedColor, setResolvedColor] = useState(color);

  useEffect(() => {
    const resolvedColor = color.startsWith('var(')
      ? window
          .getComputedStyle(document.documentElement)
          .getPropertyValue(color.slice(4, -1))
          .trim()
      : color;

    setResolvedColor(resolvedColor);
  }, [color]);

  const isColorOverridden = resolvedColor && resolvedColor !== 'none';
  const fill = isColorOverridden ? resolvedColor : 'url(#gradient)';

  return (
    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...restProps}>
      {!isColorOverridden && (
        <defs>
          <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="0">
            <stop
              offset="0%"
              stopColor="var(--search-ai-gradient-start-color, var(--search-ai-gradient-start-color-legacy))"
            />
            <stop
              offset="100%"
              stopColor="var(--search-ai-gradient-end-color, var(--search-ai-gradient-end-color-legacy))"
            />
          </linearGradient>
        </defs>
      )}
      <path
        d="M11.2597 9.12114C8.08498 8.40423 7.59322 7.91247 6.87631 4.73772C6.84346 4.59262 6.7143 4.48929 6.56505 4.48929C6.4158 4.48929 6.28664 4.59262 6.2538 4.73772C5.53657 7.91247 5.04513 8.40423 1.87038 9.12114C1.72495 9.1543 1.62163 9.28314 1.62163 9.43239C1.62163 9.58164 1.72495 9.71048 1.87038 9.74365C5.04513 10.4609 5.53657 10.9526 6.2538 14.1271C6.28664 14.2722 6.4158 14.3755 6.56505 14.3755C6.7143 14.3755 6.84346 14.2722 6.87631 14.1271C7.59354 10.9526 8.08498 10.4609 11.2597 9.74365C11.4052 9.71048 11.5082 9.58164 11.5082 9.43239C11.5082 9.28314 11.4048 9.1543 11.2597 9.12114Z"
        fill={fill}
      />
      <path
        d="M14.1299 4.17834C12.4423 3.79725 12.2053 3.5603 11.8242 1.87294C11.7911 1.72752 11.6622 1.62451 11.513 1.62451C11.3637 1.62451 11.2349 1.72752 11.2017 1.87294C10.8206 3.5603 10.5837 3.79725 8.8963 4.17834C8.75088 4.21151 8.64787 4.34035 8.64787 4.4896C8.64787 4.63885 8.75088 4.76769 8.8963 4.80086C10.5837 5.18195 10.8206 5.4189 11.2017 7.10658C11.2349 7.25168 11.3637 7.35501 11.513 7.35501C11.6622 7.35501 11.7911 7.25168 11.8242 7.10658C12.2053 5.4189 12.4423 5.18195 14.1299 4.80086C14.275 4.76769 14.3784 4.63885 14.3784 4.4896C14.3784 4.34035 14.275 4.21151 14.1299 4.17834Z"
        fill={fill}
      />
    </svg>
  );
};

export const AiStarsGradientIcon = styled(Icon).attrs({
  'data-component-name': 'icons/AiStarsGradientIcon/AiStarsGradientIcon',
})`
  height: ${({ size }) => size || '16px'};
  width: ${({ size }) => size || '16px'};

  ${({ background, borderRadius, margin }) =>
    background &&
    `
      display: flex;
      align-items: center;
      justify-content: center;

      background: ${getCssColorVariable(background)};

      padding: var(--spacing-xs);
      margin: ${margin || '0'};
      
      border-radius: ${background && borderRadius ? borderRadius : 'none'};
    `}

  color: ${({ color }) => color && getCssColorVariable(color)};
`;