import StatusGlyph, { type GlyphKind } from './StatusGlyph'
import { chipClass, glyphOf } from '../codes/tone'

/**
 * 상태를 나타내는 태그. 화면 전체가 이 하나만 쓴다.
 *
 * 생김새의 근거: 오른쪽 위 모서리를 잘라낸 각진 태그 + 왼쪽 컬러 바. 서류 모서리와
 * 서식의 항목 표시에서 가져왔다. 알약(rounded-full)을 쓰지 않는 이유는 두 가지다.
 *   1) 표 안에서 왼쪽 바가 세로로 정렬돼 눈이 한 줄로 훑고 내려갈 수 있다.
 *   2) 이 화면의 모든 상태가 같은 모양이면 색이 유일한 단서가 된다. 모양(글리프)이
 *      상태를 함께 담아야 색약 사용자와 흑백 출력에서도 구분된다.
 */

interface Props {
  /** 화면에 보이는 글자. 접근성 이름도 이 값이다. */
  label: string
  /** 코드표의 tone. 색과 글리프가 여기서 파생된다. */
  tone?: string | null
  /** tone에서 파생된 글리프를 쓰지 않고 직접 지정할 때. */
  glyph?: GlyphKind
  /** 글리프를 빼고 글자만 보여준다(자리가 아주 좁은 칸). */
  bare?: boolean
  /** 앞에 붙는 작은 식별자. 단계 번호(①) 같은 것. */
  prefix?: string
  className?: string
}

/** 오른쪽 위 5px를 잘라낸 모서리. 이 태그의 표식이다. */
const NOTCH = { clipPath: 'polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%)' }

export default function StatusChip({ label, tone, glyph, bare, prefix, className = '' }: Props) {
  const kind = glyph ?? glyphOf(tone)
  return (
    <span
      style={NOTCH}
      className={`inline-flex items-center gap-1.5 border-l-2 py-[3px] pl-1.5 pr-2 align-middle text-[11px] font-semibold leading-none tracking-tight ${chipClass(
        tone,
      )} ${className}`}
    >
      {!bare && <StatusGlyph kind={kind} />}
      {prefix && <span className="tabular-nums opacity-70">{prefix}</span>}
      {label}
    </span>
  )
}