import { SvgElement, SvgElementProps } from '@axinom/mosaic-ui';
import React from 'react';

export enum IconName {
  Error,
  Info,
  Success,
  Warning,
}

export interface IconsProps extends SvgElementProps {
  icon: IconName;
}

export const Icons: React.FC<IconsProps> = ({ icon, ...props }) => {
  const iconComponents = {
    [IconName.Error]: Error,
    [IconName.Info]: Info,
    [IconName.Success]: Success,
    [IconName.Warning]: Warning,
  };
  const IconComponent = iconComponents[icon];
  return <IconComponent {...props} />;
};

const Error: React.FC<SvgElementProps> = (props) => (
  <SvgElement viewBox="0 0 40 40" {...props}>
    <path
      vectorEffect="non-scaling-stroke"
      fill="none"
      strokeWidth="2"
      stroke="#fff"
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M12.5,12.5l15,15 M27.5,12.5l-15,15"
    />
  </SvgElement>
);

const Info: React.FC<Omit<IconsProps, 'icon'>> = (props) => (
  <SvgElement viewBox="0 0 40 40" {...props}>
    <path
      vectorEffect="non-scaling-stroke"
      fill="none"
      strokeWidth="2"
      stroke="#fff"
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M20,29.9
      V16.2l0,0V29.9z M20,10.1v2.6l0,0V10.1z"
    />
  </SvgElement>
);

const Success: React.FC<Omit<IconsProps, 'icon'>> = (props) => (
  <SvgElement viewBox="0 0 40 40" {...props}>
    <path
      vectorEffect="non-scaling-stroke"
      fill="none"
      strokeWidth="2"
      stroke="#fff"
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M29,13.5
      L17.8,26.3L11,19.1"
    />
  </SvgElement>
);

const Warning: React.FC<Omit<IconsProps, 'icon'>> = (props) => (
  <SvgElement viewBox="0 0 40 40" {...props}>
    <path
      vectorEffect="non-scaling-stroke"
      fill="none"
      strokeWidth="2"
      stroke="#fff"
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M20,10.1v13.7l0,0V10.1z M20,29.9v-2.6l0,0
      V29.9z"
    ></path>
  </SvgElement>
);
