import React, { useState } from 'react';

interface LabelTagsProps {
  tags: string[];
}

const labelStyle: React.CSSProperties = {
  display: 'inline-flex',
  alignItems: 'center',
  padding: '0 7px',
  lineHeight: '20px',
  borderRadius: 4,
  background: '#fff',
  border: '1px solid #f77234',
  color: '#1d2129',
  fontSize: 12,
  whiteSpace: 'nowrap',
};

const countStyle: React.CSSProperties = {
  ...labelStyle,
  borderColor: '#c9cdd4',
  color: '#4e5969',
  cursor: 'default',
};

export function LabelTags({ tags }: LabelTagsProps) {
  const [open, setOpen] = useState(false);

  if (!tags.length) {
    return <span className="cm-muted">—</span>;
  }

  if (tags.length === 1) {
    return <span style={labelStyle}>{tags[0]}</span>;
  }

  return (
    <span className="cm-label-tags">
      <span style={labelStyle}>{tags[0]}</span>
      <span
        className="cm-label-count"
        style={countStyle}
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
        tabIndex={0}
        role="button"
        aria-label={`还有 ${tags.length - 1} 个标签`}
      >
        +{tags.length - 1}
        {open && (
          <span className="cm-label-tooltip" role="tooltip">
            {tags.map((tag) => (
              <span key={tag} style={labelStyle}>{tag}</span>
            ))}
          </span>
        )}
      </span>
    </span>
  );
}
