import { ref } from 'vue'

const HEADLINE_FONT_OPTIONS = [
  { key: 'default',  label: 'Default (Glook)',      value: "Glook, 'Courier New'" },
  { key: 'playfair', label: 'Playfair Display',     value: "'Playfair Display', Georgia, serif" },
  { key: 'lora',     label: 'Lora',                 value: "Lora, Georgia, serif" },
  { key: 'raleway',  label: 'Raleway',              value: "Raleway, -apple-system, sans-serif" },
  { key: 'inter',    label: 'Inter',                value: "Inter, -apple-system, sans-serif" },
]

const CONTENT_FONT_OPTIONS = [
  { key: 'default',      label: 'Default (Merriweather)', value: "Merriweather, Georgia, 'Times New Roman', Times, serif" },
  { key: 'lora',         label: 'Lora',                   value: "Lora, Georgia, serif" },
  { key: 'source-serif', label: 'Source Serif 4',         value: "'Source Serif 4', Georgia, serif" },
  { key: 'inter',        label: 'Inter',                  value: "Inter, -apple-system, sans-serif" },
  { key: 'playfair',     label: 'Playfair Display',       value: "'Playfair Display', Georgia, serif" },
]

const SIZE_STEPS = [0.85, 1, 1.2, 1.45]
const SIZE_LABELS = ['S', 'M', 'L', 'XL']

const TEXT_ALIGN_OPTIONS = [
  { key: 'left',    label: 'Left' },
  { key: 'justify', label: 'Justified' },
]

const PADDING_STEPS  = [1, 0.5, 0.15]
const PADDING_LABELS = ['Default', 'Compact', 'Minimal']

const headlineSizeScale = ref(parseFloat(localStorage.getItem('s-headline-size') ?? '1'))
const contentSizeScale  = ref(parseFloat(localStorage.getItem('s-content-size')  ?? '1'))
const headlineFontKey   = ref(localStorage.getItem('s-headline-font') ?? 'default')
const contentFontKey    = ref(localStorage.getItem('s-content-font')  ?? 'default')
const textAlignKey      = ref(localStorage.getItem('s-text-align')    ?? 'left')
const contentPadding    = ref(parseFloat(localStorage.getItem('s-content-padding') ?? '1'))

function fontValue(options, key) {
  return (options.find(o => o.key === key) ?? options[0]).value
}

function applySettings() {
  const s = document.documentElement.style
  s.setProperty('--headline-font-size-scale', headlineSizeScale.value)
  s.setProperty('--content-font-size-scale',  contentSizeScale.value)
  s.setProperty('--headline-font-family',     fontValue(HEADLINE_FONT_OPTIONS, headlineFontKey.value))
  s.setProperty('--content-font-family',      fontValue(CONTENT_FONT_OPTIONS,  contentFontKey.value))
  s.setProperty('--content-text-align',      textAlignKey.value)
  s.setProperty('--content-padding',         contentPadding.value + 'rem')
}

function setHeadlineSize(scale) {
  headlineSizeScale.value = scale
  localStorage.setItem('s-headline-size', scale)
  applySettings()
}

function setContentSize(scale) {
  contentSizeScale.value = scale
  localStorage.setItem('s-content-size', scale)
  applySettings()
}

function setHeadlineFont(key) {
  headlineFontKey.value = key
  localStorage.setItem('s-headline-font', key)
  applySettings()
}

function setContentFont(key) {
  contentFontKey.value = key
  localStorage.setItem('s-content-font', key)
  applySettings()
}

function setTextAlign(key) {
  textAlignKey.value = key
  localStorage.setItem('s-text-align', key)
  applySettings()
}

function setContentPadding(step) {
  contentPadding.value = step
  localStorage.setItem('s-content-padding', step)
  applySettings()
}

export function useSettings() {
  return {
    headlineSizeScale,
    contentSizeScale,
    headlineFontKey,
    contentFontKey,
    SIZE_STEPS,
    SIZE_LABELS,
    HEADLINE_FONT_OPTIONS,
    CONTENT_FONT_OPTIONS,
    TEXT_ALIGN_OPTIONS,
    PADDING_STEPS,
    PADDING_LABELS,
    applySettings,
    setHeadlineSize,
    setContentSize,
    setHeadlineFont,
    setContentFont,
    setTextAlign,
    setContentPadding,
    textAlignKey,
    contentPadding,
  }
}