// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

import { useContext } from 'react';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import oldIconNames from './oldIconNames';
import symbols from './images/symbols.svg';
import { NAMES_12 } from './constants';
import { create } from './utils';
import OnDarkContext from '../OnDarkContext';
import { jsx as _jsx } from "react/jsx-runtime";
export * from './constants';
export const ICON_SIZE_12 = '12';
export const ICON_SIZE_16 = '16';
export const ICON_SIZE_24 = '24';
export const ICON_SIZE_32 = '32';
export const ICON_SIZE_48 = '48';
export const ICON_SIZE_64 = '64';
export const ICON_SIZE_96 = '96';
export const ICON_SIZE_128 = '128';
export const ICON_SIZE_192 = '192';
const oldIconSizes = {
  sm: ICON_SIZE_16,
  md: ICON_SIZE_32,
  lg: ICON_SIZE_48,
  xl: ICON_SIZE_64,
  xxl: ICON_SIZE_96
};
const getHref = (name, size) => {
  let iconSize = '16';
  if ((size === '12' || size === '24') && NAMES_12.indexOf(name) !== -1) {
    iconSize = '12';
  }
  return `${symbols}#${name}:${iconSize}`;
};
/**
 * `Icons` are small symbolic images used for two things: to help quickly find the right control on the screen and to
 * bring user attention to something that requires consideration. In the former case, `Icon` typically acts as a part
 * of a [Button](#!/Button) and helps differentiate this particular [Button](#!/Button) from others. `Icons` come in several
 * standard sizes.
 * @since 0.0.35
 */

const Icon = _ref => {
  let {
    baseClassName = `${CLS_PREFIX}icon`,
    className,
    name,
    src,
    size,
    intent,
    animation,
    rotate,
    flipHorizontal = false,
    flipVertical = false,
    children,
    alt = '',
    ...props
  } = _ref;
  const newSize = size && oldIconSizes[size] || size;
  const newName = name ? oldIconNames[name] || name : null;
  return /*#__PURE__*/_jsx("span", {
    className: classNames(baseClassName, {
      [`${baseClassName}--size-${newSize}`]: newSize,
      [`${baseClassName}--intent ${baseClassName}--${intent}`]: intent,
      [`${baseClassName}--animation-${animation}`]: animation,
      [`${baseClassName}--rotate-${rotate}`]: rotate,
      [`${baseClassName}--flip-horizontal`]: flipHorizontal,
      [`${baseClassName}--flip-vertical`]: flipVertical,
      [`${baseClassName}--on-dark`]: useContext(OnDarkContext)
    }, className),
    ...props,
    children: newName ? /*#__PURE__*/_jsx("svg", {
      focusable: "false",
      children: /*#__PURE__*/_jsx("use", {
        href: getHref(newName, newSize)
      })
    }) : src && /*#__PURE__*/_jsx("img", {
      src: src,
      alt: alt
    }) || children
  });
};
Icon.create = create;
export default Icon;