import { html } from './vendor/htm-preact.js';

// ── Icons ────────────────────────────────────────────────────────────────────
//
// One stroked set, drawn in currentColor and sized in em, so an icon takes the
// weight and colour of the text beside it. The Administration entry was already
// an outline shield while the rest of the site was colour emoji — a different
// drawing on every operating system, and never the same line weight twice.
//
// The explorer keeps its emoji on purpose. There the icon says what kind of file
// this is, and the colour is doing real work; a wall of identical grey outlines
// would be a worse file list.

const ICON_PATHS = {
  menu:     ['M4 7h16M4 12h16M4 17h16'],
  // A window with a chevron folding into it. Deliberately no shaft: a
  // vertical stem above a receptacle is the download glyph, and the first
  // attempt here read as one.
  tray:     ['M6 4h12a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z',
             'M8 10l4 4 4-4'],
  bell:     ['M18 9a6 6 0 1 0-12 0c0 6-2.5 7.5-2.5 7.5h17S18 15 18 9',
             'M10.3 20a2 2 0 0 0 3.4 0'],
  shield:   ['M12 3l7.5 3v5.2c0 4.6-3.1 8.6-7.5 10.3-4.4-1.7-7.5-5.7-7.5-10.3V6z'],
  globe:    ['M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18',
             'M3.4 9.2h17.2M3.4 14.8h17.2',
             'M12 3c-2.6 2.4-4 5.6-4 9s1.4 6.6 4 9c2.6-2.4 4-5.6 4-9s-1.4-6.6-4-9'],
  archive:  ['M3 7.5h18v3H3z', 'M4.5 10.5V19a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5v-8.5',
             'M10 14h4'],
  play:     ['M8 5.5v13l11-6.5z'],
  eye:      ['M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12',
             'M12 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'],
  // The same eye under a stroke. Drawn as `eye` plus the slash rather than as
  // a broken lid, so the two states of a reveal button are the same glyph and
  // the toggle reads as one control.
  eyeoff:   ['M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12',
             'M12 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5',
             'M4 4l16 16'],
  trash:    ['M4 7h16', 'M10 11v6M14 11v6',
             'M6 7l1 12.5A1.5 1.5 0 0 0 8.5 21h7a1.5 1.5 0 0 0 1.5-1.5L18 7',
             'M9.5 7V5a1.5 1.5 0 0 1 1.5-1.5h2A1.5 1.5 0 0 1 14.5 5v2'],
  user:     ['M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8',
             'M4.5 20a7.5 7.5 0 0 1 15 0'],
  gear:     ['M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6',
             'M19.2 14.4a1.7 1.7 0 0 0 .3 1.9 2 2 0 1 1-2.8 2.8 1.7 1.7 0 0 0-2.9 1.2 2 2 0 0 1-4 0 1.7 1.7 0 0 0-2.9-1.2 2 2 0 1 1-2.8-2.8 1.7 1.7 0 0 0-1.2-2.9 2 2 0 0 1 0-4 1.7 1.7 0 0 0 1.2-2.9 2 2 0 1 1 2.8-2.8 1.7 1.7 0 0 0 2.9-1.2 2 2 0 0 1 4 0 1.7 1.7 0 0 0 2.9 1.2 2 2 0 1 1 2.8 2.8 1.7 1.7 0 0 0 1.2 2.9 2 2 0 0 1 0 4 1.7 1.7 0 0 0-1.5 1.1z'],
  sun:      ['M12 8.2a3.8 3.8 0 1 0 0 7.6 3.8 3.8 0 0 0 0-7.6',
             'M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4l-1.4 1.4'],
  moon:     ['M20.8 13.4A8.6 8.6 0 1 1 10.6 3.2a6.9 6.9 0 0 0 10.2 10.2z'],
  power:    ['M12 3.2v8.4', 'M6.9 6.6a7.6 7.6 0 1 0 10.2 0'],
  lock:     ['M5.5 11h13a1 1 0 0 1 1 1v7.5a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1V12a1 1 0 0 1 1-1z',
             'M8 11V7.4a4 4 0 0 1 8 0V11'],
  envelope: ['M4 5.5h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1z',
             'M3.4 6.6L12 13.4l8.6-6.8'],
  door:     ['M13.5 3.5H6a1 1 0 0 0-1 1v15a1 1 0 0 0 1 1h7.5',
             'M10.5 12H21', 'M17.8 8.8L21 12l-3.2 3.2'],
  download: ['M12 3.5v12', 'M7.5 11l4.5 4.5 4.5-4.5', 'M4.5 20h15'],
  upload:   ['M12 20.5v-12', 'M7.5 13l4.5-4.5 4.5 4.5', 'M4.5 4h15'],
  transfer: ['M6.5 3.5v11', 'M3.5 11l3 3.5 3-3.5',
             'M17.5 20.5v-11', 'M14.5 13l3-3.5 3 3.5'],
  search:   ['M11 4.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13', 'M15.8 15.8L20.5 20.5'],
  dots:     ['M12 5.6h.01', 'M12 12h.01', 'M12 18.4h.01'],
  checkbox: ['M5.5 4h13a1.5 1.5 0 0 1 1.5 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5v-13A1.5 1.5 0 0 1 5.5 4z'],
  home:     ['M4 11.2L12 4.5l8 6.7', 'M6.2 9.8V19a1 1 0 0 0 1 1h9.6a1 1 0 0 0 1-1V9.8'],
  'folder-plus': ['M3.5 6.6a1 1 0 0 1 1-1h4.2l2 2.4h7.8a1 1 0 0 1 1 1v9.4a1 1 0 0 1-1 1h-14a1 1 0 0 1-1-1z',
                  'M12 11.4v5', 'M9.5 13.9h5'],
  plus:     ['M12 5v14', 'M5 12h14'],
  refresh:  ['M20 11a8 8 0 0 0-15.3-2', 'M4 5v4h4',
             'M4 13a8 8 0 0 0 15.3 2', 'M20 19v-4h-4'],
  clip:     ['M20.5 11.8l-8.4 8.4a5.4 5.4 0 0 1-7.6-7.6l8.8-8.8a3.6 3.6 0 0 1 5.1 5.1l-8.8 8.8a1.8 1.8 0 0 1-2.5-2.5l8.1-8.1'],
  pencil:   ['M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3',
             'M14.5 6.5l3 3'],
  check:    ['M4.5 12.5l5 5 10-11'],
  chevron:  ['M6 9.5l6 6 6-6'],
  'chevron-left':  ['M14.5 6l-6 6 6 6'],
  'chevron-right': ['M9.5 6l6 6-6 6'],
  close:    ['M6 6l12 12M18 6L6 18'],
  chat:     ['M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'],
  folder:   ['M3.5 6.6a1 1 0 0 1 1-1h4.2l2 2.4h7.8a1 1 0 0 1 1 1v9.4a1 1 0 0 1-1 1h-14a1 1 0 0 1-1-1z'],
  'bell-off': ['M18 9a6 6 0 0 0-12 0c0 6-2.5 7.5-2.5 7.5h17S18 15 18 9',
               'M10.3 20a2 2 0 0 0 3.4 0',
               'M4 4l16 16'],
  server:   ['M4 6.5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2z',
             'M4 15.5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2z',
             'M8 7.5h.01', 'M8 16.5h.01'],
  cast:     ['M2 16.1A5 5 0 0 1 6.9 21', 'M2 12.05A9 9 0 0 1 12.95 21',
             'M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6',
             'M2 21h.01'],
  video:    ['M3.5 6.5a1.5 1.5 0 0 1 1.5-1.5h14a1.5 1.5 0 0 1 1.5 1.5v11a1.5 1.5 0 0 1-1.5 1.5h-14a1.5 1.5 0 0 1-1.5-1.5z',
             'M10 9.5v5l4.5-2.5z'],
  music:    ['M9 18V5l12-2v13',
             'M4 18a2 2 0 1 0 4 0 2 2 0 1 0 -4 0',
             'M16 16a2 2 0 1 0 4 0 2 2 0 1 0 -4 0'],
  pause:    ['M7 5.5v13', 'M17 5.5v13'],
  'skip-next': ['M5 4l10 8-10 8z', 'M19 5v14'],
  'skip-prev': ['M19 4L9 12l10 8z', 'M5 5v14'],
  shuffle:  ['M16 3h5v5', 'M4 20L21 3', 'M21 16v5h-5', 'M15 15l6 6', 'M4 4l5 5'],
  repeat:   ['M17 1l4 4-4 4', 'M3 11V9a4 4 0 0 1 4-4h14',
             'M7 23l-4-4 4-4', 'M21 13v2a4 4 0 0 1-4 4H3'],
  volume:   ['M11 5L6 9H2v6h4l5 4z', 'M15.54 8.46a5 5 0 0 1 0 7.07',
             'M19.07 4.93a10 10 0 0 1 0 14.14'],
  // The spoken-language chooser, and deliberately not a speaker: the video
  // player mounts `<video controls>`, so the browser's own volume speaker sits
  // in the same window, and `volume` above is what the music player uses for
  // the thing it actually names. Two offset bubbles — the same line, said
  // twice — say "which language", which is what the button does.
  // Nothing crosses anything: these are stroked with no fill, and two
  // overlapping outlines read as a tangle at 20 px.
  'speech-pair': ['M11 2.5H4A1.5 1.5 0 0 0 2.5 4v4A1.5 1.5 0 0 0 4 9.5h1V12l3-2.5h3A1.5 1.5 0 0 0 12.5 8V4A1.5 1.5 0 0 0 11 2.5z',
                  'M13 12.5h7A1.5 1.5 0 0 1 21.5 14v4a1.5 1.5 0 0 1-1.5 1.5h-1V22l-3-2.5h-3A1.5 1.5 0 0 1 11.5 18v-4a1.5 1.5 0 0 1 1.5-1.5z'],
  // A frame with two lines at its foot — the conventional subtitle glyph, and
  // the reason `speech-pair` above is not a frame: the two sit side by side in
  // the player's toolbar and have to be told apart at a glance.
  subtitles: ['M3.5 5.5h17a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1z',
              'M6 14.5h7', 'M15.5 14.5h2.5'],
  image:    ['M5 3.5h14a1.5 1.5 0 0 1 1.5 1.5v14a1.5 1.5 0 0 1-1.5 1.5H5a1.5 1.5 0 0 1-1.5-1.5V5a1.5 1.5 0 0 1 1.5-1.5z',
             'M7 9.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0',
             'M20.5 15l-5-5-9.5 9.5'],
  'zoom-in':  ['M11 4.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13', 'M15.8 15.8L20.5 20.5',
               'M11 8v6', 'M8 11h6'],
  'zoom-out': ['M11 4.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13', 'M15.8 15.8L20.5 20.5',
               'M8 11h6'],
  frame: ['M4 9V5a1 1 0 0 1 1-1h4', 'M15 4h4a1 1 0 0 1 1 1v4',
          'M20 15v4a1 1 0 0 1-1 1h-4', 'M9 20H5a1 1 0 0 1-1-1v-4'],
  // A list with a plus: the playlist verbs, and the one button Music's
  // toolbar can spare for them (docs/playlists.md §10.3).
  playlist: ['M4 7h12', 'M4 12h12', 'M4 17h7', 'M17.5 14.5v6', 'M14.5 17.5h6'],
  // A list with a play head at its foot — "after this one", as distinct from
  // `play` (start now) and `plus` (at the end).
  playnext: ['M4 7h10', 'M4 12h10', 'M4 17h6', 'M15.5 13.5v7l5.5-3.5z'],
};

// The M of the wordmark is a picture; the rest is text. Resolved from this
// module's own URL so the hub's fingerprinted path and the application's
// app:// scheme both come out right without either being named here.
const BRAND_M = new URL('./meshbay-m.png', import.meta.url).href;

function Icon({ name, cls = '' }) {
  const paths = ICON_PATHS[name];
  if (!paths) return null;
  return html`
    <svg class="icon ${cls}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"
         fill="none" stroke="currentColor" stroke-width="1.6"
         stroke-linecap="round" stroke-linejoin="round">
      ${paths.map((d, i) => html`<path key=${i} d=${d} />`)}
    </svg>
  `;
}

export { Icon };