/* global React, AJANKOHTAISTA */

function ajKindLabel(kind, lang) {
  if (lang !== "en") return kind;
  if (kind === "Tiedote") return "Press release";
  if (kind === "Blogi") return "Blog";
  if (kind === "Webinaari") return "Webinar";
  return kind;
}

function ArticleBlocks({ blocks }) {
  return (
    <React.Fragment>
      {blocks.map((b, i) => {
        if (b.type === "lead")
          return <p key={i} className="aja-body__lead">{b.text}</p>;
        if (b.type === "h")
          return <h2 key={i} className="aja-body__h">{b.text}</h2>;
        if (b.type === "p")
          return <p key={i} dangerouslySetInnerHTML={{ __html: b.text }} />;
        if (b.type === "list")
          return (
            <ul key={i} className="aja-body__list">
              {b.items.map((it, j) => typeof it === "string"
                ? <li key={j}>{it}</li>
                : <li key={j}><span><strong>{it.t}</strong> {it.d}</span></li>)}
            </ul>
          );
        if (b.type === "olist")
          return (
            <ol key={i} className="aja-body__list aja-body__list--num">
              {b.items.map((it, j) => typeof it === "string"
                ? <li key={j}>{it}</li>
                : <li key={j}><span><strong>{it.t}</strong> {it.d}</span></li>)}
            </ol>
          );
        if (b.type === "qa")
          return (
            <div key={i} className="aja-qa">
              {b.items.map((it, j) => (
                <div key={j} className="aja-qa__item">
                  <h3 className="aja-qa__q">{it.q}</h3>
                  <p className="aja-qa__a">{it.a}</p>
                </div>
              ))}
            </div>
          );
        if (b.type === "pull")
          return (
            <blockquote key={i} className="aja-body__pull">
              <p>{`"${b.text}"`}</p>
              {b.attr && <span className="aja-body__pull-attr">{b.attr}</span>}
            </blockquote>
          );
        return null;
      })}
    </React.Fragment>
  );
}

function ArticleHero({ a }) {
  const lang = window.SOFTERA_LANG || "fi";
  const initials = a.author
    ? a.author.name.split(" ").map((s) => s[0]).slice(0, 2).join("")
    : null;
  const title = (lang === "en" && a.enTitle) ? a.enTitle : a.title;
  return (
    <section className={"aja-hero aja-hero--" + (a.hue || "cyan")}>
      <div className="aja-hero__inner">
        <nav className="aja-hero__crumbs" aria-label="breadcrumb">
          <a href={window.langHref("etusivu")}>Softera</a>
          <i data-lucide="chevron-right"></i>
          <a href={window.langHref("ajankohtaista")}>{window.L("Ajankohtaista","Latest")}</a>
          <i data-lucide="chevron-right"></i>
          <span>{ajKindLabel(a.kind, lang)}</span>
        </nav>
        <div className="aja-hero__meta">
          <span className="aja-hero__kind">{ajKindLabel(a.kind, lang)}</span>
          <span className="aja-hero__date">{a.date}</span>
        </div>
        <h1 className="aja-hero__h">{title}</h1>
        {a.author && (
          <div className="aja-hero__by">
            <div className="aja-hero__by-av">{initials}</div>
            <div>
              <div className="aja-hero__by-name">{a.author.name}</div>
              <div className="aja-hero__by-role">{a.author.role}</div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function ArticleBody({ a }) {
  const siteLang = window.SOFTERA_LANG || "fi";
  const [lang, setLang] = React.useState((siteLang === "en" && a.english) ? "en" : "fi");
  React.useEffect(() => {
    if (window.lucide) lucide.createIcons();
  }, [lang]);

  const hasEn = !!a.english;
  const showFi = lang === "fi";
  const enBody = a.english && a.english.body;
  const enTitle = a.english && a.english.title;
  const enAuthor = a.english && a.english.author;

  return (
    <section className="aja-body">
      <div className="aja-body__inner">
        {hasEn && (
          <div className="aja-langswitch">
            <span className="aja-langswitch__lbl">{window.L("Kieli","Language")}</span>
            <button
              className={"aja-langswitch__btn" + (showFi ? " is-active" : "")}
              onClick={() => setLang("fi")}
            >
              Suomi
            </button>
            <button
              className={"aja-langswitch__btn" + (!showFi ? " is-active" : "")}
              onClick={() => setLang("en")}
            >
              English
            </button>
          </div>
        )}

        {showFi ? (
          <React.Fragment>
            <ArticleBlocks blocks={a.body} />
            {a.contacts && a.contacts.length > 0 && (
              <div className="aja-contacts">
                <div className="aja-contacts__h">{window.L("Lisätietoja","More information")}</div>
                <div className="aja-contacts__list">
                  {a.contacts.map((c, i) => (
                    <div key={i} className="aja-contacts__item">
                      <div className="aja-contacts__name">{c.name}</div>
                      {c.role && <div className="aja-contacts__role">{c.role}</div>}
                      {c.phone && <div className="aja-contacts__line">{c.phone}</div>}
                      {c.email && (
                        <div className="aja-contacts__line">
                          <a href={"mailto:" + c.email}>{c.email}</a>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </React.Fragment>
        ) : (
          <React.Fragment>
            <div className="aja-body__en-head">
              <h2>{enTitle}</h2>
              {enAuthor && <span className="by">{enAuthor}</span>}
            </div>
            <ArticleBlocks blocks={enBody} />
          </React.Fragment>
        )}
      </div>
    </section>
  );
}

function ArticleRelated({ slug }) {
  const others = AJANKOHTAISTA.filter((x) => x.slug !== slug).slice(0, 3);
  return (
    <section className="aja-related">
      <div className="aja-related__inner">
        <div className="aja-related__head">
          <h2 className="aja-related__title">{window.L("Lue lisää ajankohtaisia","Read more updates")}</h2>
          <a className="aja-related__back" href={window.langHref("ajankohtaista")}>
            <i data-lucide="arrow-left"></i> {window.L("Kaikki julkaisut","All posts")}
          </a>
        </div>
        <div className="aja-related__grid">
          {others.map((a) => { const lang = window.SOFTERA_LANG || "fi"; return (
            <a key={a.slug} href={window.langHref("ajankohtaista-" + a.slug)} className="aj-card">
              <div className={"aj-card__art aj-card__art--" + (a.hue || "cyan")}>
                <div className="aj-card__ico">
                  <i data-lucide={a.icon || "newspaper"}></i>
                </div>
                <div className="aj-card__kind">{ajKindLabel(a.kind, lang)}</div>
              </div>
              <div className="aj-card__body">
                <div className="aj-card__date">{a.date}</div>
                <h3 className="aj-card__h">{(lang === "en" && a.enTitle) ? a.enTitle : a.title}</h3>
                <p className="aj-card__lede">{(lang === "en" && a.enLede) ? a.enLede : a.lede}</p>
                <span className="aj-card__cta">
                  {window.L("Lue lisää","Read more")} <i data-lucide="arrow-right"></i>
                </span>
              </div>
            </a>
          ); })}
        </div>
      </div>
    </section>
  );
}

function AjankohtaistaArticle({ slug }) {
  const a = AJANKOHTAISTA.find((x) => x.slug === slug);

  React.useEffect(() => {
    const t = setInterval(() => { if (window.lucide) lucide.createIcons(); }, 200);
    setTimeout(() => clearInterval(t), 2500);
  }, [slug]);

  if (!a) {
    return (
      <div className="aj-page" data-screen-label={"Artikkeli " + slug}>
        <div style={{ position: "relative" }}>
          <Header />
        </div>
        <section className="aja-body">
          <div className="aja-body__inner">
            <h1 className="aja-body__h">{window.L("Julkaisua ei löytynyt","Post not found")}</h1>
            <p>
              <a href={window.langHref("ajankohtaista")}>{window.L("Palaa ajankohtaiset-sivulle","Back to the Latest page")}</a>.
            </p>
          </div>
        </section>
        <Footer />
      </div>
    );
  }

  return (
    <div className="aj-page" data-screen-label={"Artikkeli " + a.slug}>
      <div style={{ position: "relative" }}>
        <Header />
        <ArticleHero a={a} />
      </div>
      <ArticleBody a={a} />
      <ArticleRelated slug={a.slug} />
      <Footer />
    </div>
  );
}

window.AjankohtaistaArticle = AjankohtaistaArticle;