import * as React from 'react';

import {cornerShapeStencil, pickForegroundColor} from '@workday/canvas-kit-react/common';
import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
import {calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
import {checkSmallIcon} from '@workday/canvas-system-icons-web';
import {system} from '@workday/canvas-tokens-web';

export interface ColorSwatchProps extends React.HTMLAttributes<HTMLDivElement> {
  color: string;
  showCheck?: boolean;
}

export const colorPickerColorSwatchStencil = createStencil({
  extends: cornerShapeStencil,
  vars: {
    color: '',
    iconColor: '',
  },
  base: ({color, iconColor}) => ({
    [systemIconStencil.vars.color]: iconColor,
    [cornerShapeStencil.vars.shape]: system.legacy.shape.sm,
    width: system.legacy.size.xxs,
    height: system.legacy.size.xxs,
    backgroundColor: color,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    forcedColorAdjust: 'none',
    '& > *': {
      // Account for 24px icon
      margin: calc.negate(px2rem(2)),
    },
  }),
  modifiers: {
    withShadow: {
      true: {
        boxShadow: `inset 0px 0px 0px ${px2rem(1)} rgba(0, 0, 0, 0.25)`,
        '@media (forced-colors: active)': {
          outline: `solid ${px2rem(1)} SelectedItemText`,
        },
      },
    },
  },
});

export const ColorSwatch = ({color, showCheck = false, ...elemProps}: ColorSwatchProps) => {
  const lowerCasedColor = color.toLowerCase();

  return (
    <div
      data-color={lowerCasedColor}
      {...handleCsProp(
        elemProps,
        colorPickerColorSwatchStencil({
          color,
          iconColor: pickForegroundColor(color),
          withShadow: showCheck || lowerCasedColor === '#ffffff' ? 'true' : undefined,
        })
      )}
    >
      {showCheck && <SystemIcon icon={checkSmallIcon} />}
    </div>
  );
};