import {CSSObject} from '@emotion/styled';

import {createComponent} from '@workday/canvas-kit-react/common';
import {BrandingColor, CanvasColor, colors} from '@workday/canvas-kit-react/tokens';
import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
import {base as baseTokens, system} from '@workday/canvas-tokens-web';
import {CanvasAppletIcon, CanvasIconTypes} from '@workday/design-assets-types';

import {Svg, SvgProps, svgStencil} from './Svg';

/**
 * @deprecated Interface `AppletIconStyles` will be removed in a future version. All props will be moved inside `AppletIconProps`.
 */
export interface AppletIconStyles {
  /**
   * The icon color hue. Must use a member of the `AppletIcon.Colors` static enum.
   * @default AppletIcon.Colors.Blueberry
   */
  color?: BrandingColor;
}

/**
 * @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
 */
export const appletIconStyles = ({
  color = BrandingColor.Blueberry,
}: AppletIconStyles): CSSObject => {
  // Check if valid color
  if (
    !(Object.keys(BrandingColor) as (keyof typeof BrandingColor)[])
      .map(color => BrandingColor[color])
      .includes(color)
  ) {
    throw Error(`Color "${color}" not found`);
  }

  const colorNames: {[key: number]: CanvasColor} = {
    100: `${color}100` as CanvasColor,
    200: `${color}200` as CanvasColor,
    300: `${color}300` as CanvasColor,
    400: `${color}400` as CanvasColor,
    500: `${color}500` as CanvasColor,
  };

  return {
    '& .color-100': {
      fill: system.color.fg.inverse,
    },
    '& .color-200': {
      fill: colors[colorNames[200]],
    },
    '& .color-300': {
      fill: colors[colorNames[300]],
    },
    '& .color-400': {
      fill: colors[colorNames[400]],
    },
    '& .color-400-alpha-20': {
      fill: colors[colorNames[400]],
    },
    '& .color-500': {
      fill: colors[colorNames[500]],
    },
  };
};

/**
 *  @deprecated ⚠️ `AppletIconProps` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
 */
export interface AppletIconProps
  extends AppletIconStyles,
    Pick<SvgProps, 'shouldMirror' | 'shouldMirrorInRTL' | 'cs'> {
  /**
   * The icon to display from `@workday/canvas-applet-icons-web`.
   */
  icon: CanvasAppletIcon;
  /**
   * The size of the AppletIcon in `px`.
   * @default 92
   */
  size?: number;
}

/**
 *  @deprecated ⚠️ `appletIconStencil` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
 */
export const appletIconStencil = createStencil({
  extends: svgStencil,
  vars: {
    color200: '',
    color300: '',
    color400: '',
    color500: '',
  },
  base: ({color200, color300, color400, color500, size}) => ({
    [size]: px2rem(92),
    '& .color-100': {
      fill: system.color.fg.inverse,
    },
    '& .color-200': {
      fill: cssVar(color200, baseTokens.legacy.blue200),
    },
    '& .color-300': {
      fill: cssVar(color300, baseTokens.legacy.blue400),
    },
    '& .color-400': {
      fill: cssVar(color400, baseTokens.legacy.blue600),
    },
    '& .color-400-alpha-20': {
      fill: cssVar(color400, baseTokens.legacy.blue600),
    },
    '& .color-500': {
      fill: cssVar(color500, baseTokens.legacy.blue700),
    },
  }),
});

/**
 *  @deprecated ⚠️ `AppletIcon` is deprecated and will be removed in a future major version. Deprecated in v15.0.0.
 */
export const AppletIcon = createComponent('span')({
  displayName: 'AppletIcon',
  Component: ({size, icon, color, ...elemProps}: AppletIconProps, ref, Element) => {
    const colors = color && {
      color200: baseTokens.legacy[`${color}200` as keyof typeof baseTokens.legacy],
      color300: baseTokens.legacy[`${color}300` as keyof typeof baseTokens.legacy],
      color400: baseTokens.legacy[`${color}400` as keyof typeof baseTokens.legacy],
      color500: baseTokens.legacy[`${color}500` as keyof typeof baseTokens.legacy],
    };

    return (
      <Svg
        src={icon}
        type={CanvasIconTypes.Applet}
        as={Element}
        ref={ref}
        {...handleCsProp(elemProps, [
          appletIconStencil({
            ...colors,
            size: size ? px2rem(size) : undefined,
          }),
        ])}
      />
    );
  },
  subComponents: {
    Colors: BrandingColor,
  },
});