import cx from 'clsx';
import { isNil } from 'lodash-es';
import { useMemo } from 'react';
import { schemeType, SchemeType } from '../models';
import { Badge } from './Badge';
import styles from './SchemeSign.module.css';

type SchemeSignProps = {
  scheme?: SchemeType;
  short?: boolean;
};

export function SchemeSign({ scheme, short = false }: SchemeSignProps) {
  const schemeName = schemeType(scheme, short);
  const signColorStyles = useMemo(() => {
    switch (scheme) {
      case 'q_scheme':
        return styles.q;
      case 'q_2_scheme':
        return styles.q2;
      case 'swatch_scheme':
        return styles.swatch;
      case 'material_2':
        return styles.m2;
      case 'material_3':
        return styles.m3;
      case 'material_3_dynamic':
        return styles.m3d;
    }
  }, [scheme]);

  return (
    !isNil(scheme) && (
      <Badge extendClassName={cx(styles.badge, signColorStyles)}>{schemeName}</Badge>
    )
  );
}