/* global React */
// Shared note-type pill picker.
//
// Behaviour:
//   - Top row of primary type pills (Round, Review, Consult, Discharge).
//     None selected → free text only.
//   - When a type with sub-types is selected, a sub-type tray appears below
//     ("ROUND · PICK A SUB-TYPE") with chips for each sub-type.
//   - Selecting a sub-type fires onSubTypeChange — the host then optionally
//     applies a template via window.V2_GET_TEMPLATE.
//
// Props:
//   types          — array of noteTypes (may include subTypes[])
//   typeId         — currently-selected primary type id (or null)
//   subTypeId      — currently-selected sub-type id (or null)
//   onTypeChange   — (typeId | null) => void  (null = clear/free text)
//   onSubTypeChange — (subTypeId)    => void
//   size           — 'sm' | 'md' (visual density)
const V2NoteTypePicker = function V2NoteTypePicker({
  types, typeId, subTypeId, onTypeChange, onSubTypeChange, size = 'md'
}) {
  const padY = size === 'sm' ? 2.5 : 3.5;
  const padX = size === 'sm' ? 8 : 9;
  const fontSize = size === 'sm' ? 10.5 : 11;

  const activeType = types.find((t) => t.id === typeId);
  const subTypes = activeType?.subTypes || null;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {/* Primary type row */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }} data-comment-anchor="42fc4159ed-div-32-7">
        {types.map((nt) => {
          const active = nt.id === typeId;
          return (
            <button
              key={nt.id}
              onClick={() => onTypeChange(active ? null : nt.id)}
              aria-pressed={active}
              style={{
                padding: `${padY}px ${padX}px`,
                borderRadius: 7,
                border: '1px solid',
                borderColor: active ? 'var(--primary)' : 'var(--sage-200)',
                background: active ? 'var(--primary-muted)' : '#fff',
                color: active ? 'var(--primary)' : 'var(--sage-700)',
                fontSize,
                fontWeight: active ? 600 : 500,
                letterSpacing: '0.01em',
                fontFamily: 'var(--font-sans)',
                cursor: 'pointer',
                outline: active ? '1px solid var(--primary)' : 'none',
                outlineOffset: -1
              }}>
              
              {nt.label}
            </button>);

        })}
      </div>

      {/* Sub-type tray */}
      {subTypes && subTypes.length > 0 &&
      <div style={{
        padding: '10px 12px',
        border: '1px dashed var(--sage-300)',
        borderRadius: 8,
        background: 'var(--sage-50)',
        display: 'flex', flexDirection: 'column', gap: 8
      }}>
          <div style={{
          fontSize: 10.5,
          letterSpacing: '0.01em',
          color: 'var(--sage-500)',
          fontWeight: 500,
          fontFamily: 'var(--font-sans)'
        }}>
            {activeType.label} · pick a sub-type
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
            {subTypes.map((s) => {
            const active = s.id === subTypeId;
            return (
              <button
                key={s.id}
                onClick={() => onSubTypeChange(s.id)}
                aria-pressed={active}
                style={{
                  padding: '2.5px 8px',
                  borderRadius: 9999,
                  border: '1px solid',
                  borderColor: active ? 'var(--primary)' : 'var(--sage-200)',
                  background: active ? 'var(--primary)' : '#fff',
                  color: active ? '#fff' : 'var(--sage-700)',
                  fontSize: 10.5,
                  fontWeight: 500,
                  letterSpacing: '0.01em',
                  fontFamily: 'var(--font-sans)',
                  cursor: 'pointer'
                }}>
                
                  {s.short || s.label}
                </button>);

          })}
          </div>
        </div>
      }
    </div>);

};

window.V2NoteTypePicker = V2NoteTypePicker;