import React from 'react';

import { Reveal } from '../Reveal';
import { PremiumButton } from '../PremiumButton';
import { ArticleCard } from '../ArticleCard';
import { useSectionHeading, useSite } from '../../api';
import { useLang } from '../../i18n/lang';
import { useFieldSaver } from '../../admin/AdminContext';
import { InlineEdit } from '../admin/InlineEdit';
import { AddItemButton, EditableItem } from '../../admin/Editable';

export function Articles() {
  const { articles } = useSite();
  const { href } = useLang();
  const heading = useSectionHeading('articles');
  const save = useFieldSaver();

  // پیش‌نویس‌ها فقط در صفحه وبلاگ (برای ادمین) دیده می‌شوند، نه در خانه
  const published = articles.filter((a) => a.status !== 'draft');

  const saveHeading = (field: 'label' | 'title' | 'lead' | 'cta_label', 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 (
    <section className="bg-char py-24 lg:py-32" aria-labelledby="articles-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
        <Reveal className="max-w-2xl ltr:text-left rtl:text-right">
          <p className="text-sm font-light text-copper">
            <InlineEdit value={heading.label} onSave={(v) => saveHeading('label', v)} />
          </p>
          <h2 id="articles-title" className="mt-5 text-section font-bold text-ivory">
            <InlineEdit value={heading.title} onSave={(v) => saveHeading('title', v)} />
          </h2>
          <p className="mt-5 text-base font-light leading-9 text-ivory/60">
            <InlineEdit multiline value={heading.lead} onSave={(v) => saveHeading('lead', v)} />
          </p>
          <div className="mt-6 h-px w-24 bg-copper/70" />
        </Reveal>

        <div className="mt-14 grid gap-6 lg:grid-cols-3">
          {published.slice(0, 3).map((article, i) =>
          <Reveal key={article.id} delay={0.06 * i} className="h-full">
              <EditableItem resource="articles" item={article} className="h-full" editHref={`/admin/write/${article.id}`}>
                <ArticleCard article={article} />
              </EditableItem>
            </Reveal>
          )}
        </div>

        {heading.cta_label && heading.cta_href && (
          <Reveal delay={0.1}>
            <div className="mt-12 flex justify-center">
              <PremiumButton to={href(heading.cta_href)} className="font-light">
                <InlineEdit value={heading.cta_label} onSave={(v) => saveHeading('cta_label', v)} />
              </PremiumButton>
            </div>
          </Reveal>
        )}
        <div className="mt-6">
          <AddItemButton resource="articles" />
        </div>
      </div>
    </section>);

}