// "Aa" sheet: text size, typeface, spacing, theme, how verses are laid out, and a second Bible
// to read beside the first.
import Sheet from './Sheet.jsx';
import { READER_THEMES } from './readerThemes.js';

const SIZES = [['S', 0.875], ['M', 1], ['L', 1.125], ['XL', 1.25], ['XXL', 1.5]];

function Segmented({ options, value, onChange, label }) {
  return (
    <div role="group" aria-label={label} className="flex overflow-hidden rounded-xl border border-[var(--r-line)]">
      {options.map(([id, text]) => (
        <button key={String(id)} type="button" onClick={() => onChange(id)} aria-pressed={value === id}
          className={`flex-1 px-3 py-2 text-sm ${value === id ? 'bg-[var(--r-text)] text-[var(--r-bg)]' : 'text-[var(--r-sub)] hover:bg-black/5'}`}>
          {text}
        </button>
      ))}
    </div>
  );
}

export default function SettingsSheet({
  open, onClose, fontSize, onFontSize, theme, onTheme, layout, onLayout, wide, onWide,
  font, onFont, spacing, onSpacing, verseNumbers, onVerseNumbers,
}) {
  const row = 'mb-4';
  const label = 'mb-1.5 block text-xs text-[var(--r-sub)]';
  return (
    <Sheet open={open} onClose={onClose} title="Reading settings">
      <div className={row}>
        <span className={label}>Text size</span>
        <Segmented label="Text size" options={SIZES.map(([l, s]) => [s, l])} value={fontSize} onChange={onFontSize} />
      </div>
      <div className={row}>
        <span className={label}>Typeface</span>
        <Segmented label="Typeface" options={[['serif', 'Serif'], ['sans', 'Sans'], ['easy', 'Easy to read']]} value={font} onChange={onFont} />
      </div>
      <div className={row}>
        <span className={label}>Line spacing</span>
        <Segmented label="Line spacing" options={[['snug', 'Snug'], ['normal', 'Normal'], ['airy', 'Airy']]} value={spacing} onChange={onSpacing} />
      </div>
      <div className={row}>
        <span className={label}>Theme</span>
        <Segmented label="Theme" options={Object.entries(READER_THEMES).map(([id, t]) => [id, t.label])} value={theme} onChange={onTheme} />
      </div>
      <div className={row}>
        <span className={label}>Verses</span>
        <Segmented label="Verse layout" options={[['flow', 'Flowing'], ['verses', 'One per line']]} value={layout} onChange={onLayout} />
      </div>
      <div className={row}>
        <span className={label}>Verse numbers</span>
        <Segmented label="Verse numbers" options={[[true, 'Show'], [false, 'Hide']]} value={verseNumbers} onChange={onVerseNumbers} />
      </div>
      <div className={row}>
        <span className={label}>Width</span>
        <Segmented label="Reading width" options={[[false, 'Column'], [true, 'Two columns']]} value={wide} onChange={onWide} />
      </div>
    </Sheet>
  );
}