import React from 'react';
import { Reveal } from '../Reveal';
import { SectionHeading } from '../SectionHeading';
import { useSectionHeading, useSite } from '../../api';
import { AddItemButton, EditableItem, SingletonPill } from '../../admin/Editable';
import { InlineEdit } from '../admin/InlineEdit';
import { useFieldSaver } from '../../admin/AdminContext';
import { useLang, formatNumber } from '../../i18n/lang';

export function WhyUs() {
  const { why_us } = useSite();
  const { lang } = useLang();
  const heading = useSectionHeading('why_us');
  const save = useFieldSaver();

  const saveItem = (id: number, changes: Record<string, unknown>) =>
    save('why-us', id, changes, (d) => {
      const it = d.why_us.find((x) => x.id === id);
      if (it) Object.assign(it, changes);
    });

  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="why-title">
      <div className="mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10">
        <div className="lg:col-span-5">
          <SectionHeading
            title={heading.title}
            lead={heading.lead}
            headingKey="why_us" />

          {heading.image && (
            <Reveal delay={0.12}>
              <img
                src={heading.image}
                alt={heading.title}
                className="mt-10 h-80 w-full object-cover" />

            </Reveal>
          )}
        </div>

        <div className="lg:col-span-7">
          <div className="grid gap-x-10 gap-y-px sm:grid-cols-2">
            {why_us.map((item, i) =>
            <Reveal key={item.id} delay={0.05 * i}>
              <EditableItem resource="why_us" item={item}>
                <div className="flex h-full flex-col border-t border-ivory/10 py-8">
                  <span className="text-xs font-light text-copper">{lang === 'fa' ? `۰${formatNumber(i + 1, lang)}` : formatNumber(i + 1, lang).padStart(2, '0')}</span>
                  <h3 className="mt-4 text-lg font-bold text-ivory">
                    <InlineEdit
                      value={item.title}
                      onSave={(v) => saveItem(item.id, { title: v })}
                    />
                  </h3>
                  <p className="mt-3 text-sm font-light leading-8 text-ivory/55">
                    <InlineEdit
                      multiline
                      value={item.desc}
                      onSave={(v) => saveItem(item.id, { desc: v })}
                    />
                  </p>
                </div>
              </EditableItem>
              </Reveal>
            )}
          </div>
          <div className="mt-8">
            <AddItemButton resource="why_us" />
          </div>
        </div>
      </div>
    </section>);

}