/* iOS-style on-screen keyboard — appears when the Ebb input is activated */
const { useState: useStateK } = React;

const KB_ICONS = {
  shift: '<svg viewBox="0 0 24 24" width="22" height="22" fill="none"><path d="M11.3 4.7a1 1 0 0 1 1.4 0l7 7a1 1 0 0 1-.7 1.7H15v5a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-5H5a1 1 0 0 1-.7-1.7l7-7Z" fill="currentColor"/></svg>',
  delete: '<svg viewBox="0 0 30 24" width="26" height="22" fill="none"><path d="M9 3h16a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H9a2 2 0 0 1-1.5-.7l-6.2-7.6a1.1 1.1 0 0 1 0-1.4l6.2-7.6A2 2 0 0 1 9 3Z" fill="currentColor"/><path d="m14.5 8.5 7 7m0-7-7 7" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/></svg>',
  return: '<svg viewBox="0 0 24 24" width="24" height="24" fill="none"><path d="M20 5v6a3 3 0 0 1-3 3H6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.5 10.5 6 14l3.5 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
  emoji: '<svg viewBox="0 0 24 24" width="26" height="26" fill="none"><circle cx="12" cy="12" r="9.2" stroke="currentColor" stroke-width="1.7"/><circle cx="8.7" cy="10" r="1.25" fill="currentColor"/><circle cx="15.3" cy="10" r="1.25" fill="currentColor"/><path d="M8.2 14.4a4.8 4.8 0 0 0 7.6 0" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',
  mic: '<svg viewBox="0 0 24 24" width="24" height="24" fill="none"><rect x="9" y="3" width="6" height="11" rx="3" fill="currentColor"/><path d="M6 11a6 6 0 0 0 12 0M12 17v3.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',
};

function KbGlyph({ name }) {
  return <span className="kb-ic" aria-hidden="true" dangerouslySetInnerHTML={{ __html: KB_ICONS[name] }} />;
}

const ROW1 = ['q','w','e','r','t','y','u','i','o','p'];
const ROW2 = ['a','s','d','f','g','h','j','k','l'];
const ROW3 = ['z','x','c','v','b','n','m'];

function IOSKeyboard({ open, peek, onChar, onBackspace, onReturn }) {
  const [shift, setShift] = useStateK(true);
  const cap = (ch) => (shift ? ch.toUpperCase() : ch);
  const typeChar = (ch) => { onChar(cap(ch)); if (shift) setShift(false); };

  return (
    <div className={"keyboard" + (open ? " open" : "") + (peek ? " peek" : "")} aria-hidden={!open}>
      <div className="kb-rows">
        <div className="kb-row">
          {ROW1.map(ch => (
            <button key={ch} className="key" onMouseDown={e => { e.preventDefault(); typeChar(ch); }}>{cap(ch)}</button>
          ))}
        </div>
        <div className="kb-row kb-row-2">
          {ROW2.map(ch => (
            <button key={ch} className="key" onMouseDown={e => { e.preventDefault(); typeChar(ch); }}>{cap(ch)}</button>
          ))}
        </div>
        <div className="kb-row kb-row-3">
          <button className={"key key-mod" + (shift ? " active" : "")}
            onMouseDown={e => { e.preventDefault(); setShift(s => !s); }}>
            <KbGlyph name="shift" />
          </button>
          {ROW3.map(ch => (
            <button key={ch} className="key" onMouseDown={e => { e.preventDefault(); typeChar(ch); }}>{cap(ch)}</button>
          ))}
          <button className="key key-mod" onMouseDown={e => { e.preventDefault(); onBackspace(); }}>
            <KbGlyph name="delete" />
          </button>
        </div>
        <div className="kb-row kb-row-4">
          <button className="key key-wide key-alt" onMouseDown={e => e.preventDefault()}>ABC</button>
          <button className="key key-space" onMouseDown={e => { e.preventDefault(); onChar(' '); }}>space</button>
          <button className="key key-wide key-return" onMouseDown={e => { e.preventDefault(); onReturn(); }}>
            <KbGlyph name="return" />
          </button>
        </div>
      </div>
      <div className="kb-util">
        <button className="kb-util-btn" onMouseDown={e => e.preventDefault()}><KbGlyph name="emoji" /></button>
        <button className="kb-util-btn" onMouseDown={e => e.preventDefault()}><KbGlyph name="mic" /></button>
      </div>
    </div>
  );
}
window.IOSKeyboard = IOSKeyboard;