import React from 'react'
import { Reveal } from './Reveal'
import { useSectionHeading } from '../api'
import { useFieldSaver } from '../admin/AdminContext'
import { InlineEdit } from './admin/InlineEdit'

type SectionHeadingProps = {
  /** در صورت ارسال، تیتر و توضیح از دیتابیس خوانده و به‌صورت درجا ویرایش‌پذیر می‌شوند */
  headingKey?: string
  title?: string
  lead?: string
  align?: 'right' | 'center'
  tone?: 'copper' | 'ivory'
}

export function SectionHeading({
  headingKey,
  title,
  lead,
  align = 'right',
  tone = 'ivory',
}: SectionHeadingProps) {
  const heading = useSectionHeading(headingKey ?? '')
  const save = useFieldSaver()
  const isDb = !!headingKey
  const currentTitle = isDb ? heading.title : (title ?? '')
  const currentLead = isDb ? heading.lead : (lead ?? '')
  const isCenter = align === 'center'

  const saveField = (field: 'title' | 'lead', value: string) =>
    save('section-headings', heading.id, { [field]: value }, (d) => {
      const h = d.section_headings.find((s) => s.id === heading.id)
      if (h) (h as Record<string, unknown>)[field] = value
    })

  return (
    <Reveal className={isCenter ? 'mx-auto max-w-2xl text-center' : 'max-w-2xl ltr:text-left rtl:text-right'}>
      <InlineEdit
        as="h2"
        value={currentTitle}
        onSave={(v) => saveField('title', v)}
        className={`text-section font-bold ${tone === 'copper' ? 'text-copper' : 'text-ivory'}`}
      />

      {currentLead && (
        <InlineEdit
          as="p"
          multiline
          value={currentLead}
          onSave={(v) => saveField('lead', v)}
          className="mt-5 text-base font-light leading-9 text-ivory/60"
        />
      )}

      <div className={`mt-6 h-px w-24 bg-copper/70 ${isCenter ? 'mx-auto' : ''}`} />
    </Reveal>
  )
}