import clsx from 'clsx';

import ConceptTooltip from '@/components/Common/ConceptTooltip';
import ConstituentaTooltip from '@/components/Help/ConstituentaTooltip';
import { IConstituenta } from '@/models/rsform';
import { isMockCst } from '@/models/rsformAPI';
import { colorFgCstStatus, IColorTheme } from '@/utils/color';
import { describeExpressionStatus } from '@/utils/labels';

interface ConstituentaBadgeProps {
  prefixID?: string;
  shortTooltip?: boolean;
  value: IConstituenta;
  theme: IColorTheme;
}

function ConstituentaBadge({ value, prefixID, shortTooltip, theme }: ConstituentaBadgeProps) {
  return (
    <div
      id={`${prefixID}${value.alias}`}
      className={clsx(
        'min-w-[3.1rem] max-w-[3.1rem]',
        'px-1',
        'border rounded-md',
        'text-center font-semibold whitespace-nowrap'
      )}
      style={{
        borderColor: colorFgCstStatus(value.status, theme),
        color: colorFgCstStatus(value.status, theme),
        backgroundColor: isMockCst(value) ? theme.bgWarning : theme.bgInput
      }}
    >
      {value.alias}
      {!shortTooltip ? <ConstituentaTooltip anchor={`#${prefixID}${value.alias}`} data={value} /> : null}
      {shortTooltip ? (
        <ConceptTooltip anchorSelect={`#${prefixID}${value.alias}`} place='right'>
          <p>
            <b>Статус</b>: {describeExpressionStatus(value.status)}
          </p>
        </ConceptTooltip>
      ) : null}
    </div>
  );
}

export default ConstituentaBadge;