import React from 'react';

import type { StatusIndicatorStateName, StatusIndicatorVariant } from '@shoptet/ui-core-web';

/** The geometric shape drawn per intent. */
export type StatusIndicatorShapeKind = 'circle' | 'diamond' | 'hexagon';

export function shapeForState(state: StatusIndicatorStateName): StatusIndicatorShapeKind {
  switch (state) {
    case 'critical': {
      return 'hexagon';
    }
    case 'warning': {
      return 'diamond';
    }
    default: {
      return 'circle';
    }
  }
}

const GEOMETRY_CLASS = 'status-indicator__geometry';

// Authored in a 20×20 viewBox; `outlined` geometry is `full` inset by 1 unit (half the 2-unit
// stroke) so the stroked outer edge matches the `full` contour exactly.
export const SHAPE_GEOMETRY: Record<StatusIndicatorVariant, Record<StatusIndicatorShapeKind, React.ReactNode>> = {
  full: {
    hexagon: <path className={GEOMETRY_CLASS} d='M10 0 18.6603 5 18.6603 15 10 20 1.3397 15 1.3397 5Z' />,
    diamond: (
      <path
        className={GEOMETRY_CLASS}
        d='M19.4142 8.5858C20.1953 9.3668 20.1953 10.6332 19.4142 11.4142L11.4142 19.4142C10.6332 20.1953 9.3668 20.1953 8.5858 19.4142L0.5858 11.4142C-0.1953 10.6332 -0.1953 9.3668 0.5858 8.5858L8.5858 0.5858C9.3668 -0.1953 10.6332 -0.1953 11.4142 0.5858L19.4142 8.5858Z'
      />
    ),
    circle: <circle className={GEOMETRY_CLASS} cx='10' cy='10' r='9' />,
  },
  outlined: {
    hexagon: (
      <path
        className={GEOMETRY_CLASS}
        d='M10 1.1547 17.6603 5.5774 17.6603 14.4226 10 18.8453 2.3397 14.4226 2.3397 5.5774Z'
      />
    ),
    diamond: (
      <path
        className={GEOMETRY_CLASS}
        d='M18.7071 9.2929C19.0976 9.6834 19.0976 10.3166 18.7071 10.7071L10.7071 18.7071C10.3166 19.0976 9.6834 19.0976 9.2929 18.7071L1.2929 10.7071C0.9024 10.3166 0.9024 9.6834 1.2929 9.2929L9.2929 1.2929C9.6834 0.9024 10.3166 0.9024 10.7071 1.2929L18.7071 9.2929Z'
      />
    ),
    circle: <circle className={GEOMETRY_CLASS} cx='10' cy='10' r='8' />,
  },
};