import {
  Card,
  PageLink,
  CardSection,
} from "@components/index";
import Post from "@models/Feed";
import noop from "@utils/noop";
import { Lang, getTranslateFunc } from "../../i18n";

const cardTimeOpts: Intl.DateTimeFormatOptions = {
  day: "numeric",
  month: "numeric",
  year: "numeric",
  hour: "numeric",
  minute: "2-digit",
};

type PostsProps = {
  feed: Post[];
  lang: Lang
};

const Posts: React.FC<PostsProps> = ({ feed: posts, lang }) => {
  const isFi = lang === "fi";
  const t = getTranslateFunc(lang);

  const buttonText = `${t("Lue lisää")}\xa0›`;
  const allNewsText = t("Lue tuoreimmat uutiset");
  const allNewsDesc = `${t("uutiset")}\xa0›`;
  const meetingNotesText = t("Hallituksen pöytäkirjat");
  const meetingNotesDesc = `${t("ja hallitukset kuulumiset")}\xa0›`;
  const galleryText = t("Kuvia tapahtumista");
  const galleryDesc = `${t("kuvagalleriassa")}\xa0›`;

  const locale = isFi ? "fi-FI" : "en-GB";

  const filteredFeed = posts.map((post) => ({
    ...post,
    title: isFi ? post.title_fi : post.title_en,
    description: isFi ? post.description_fi : post.description_en,
    content: isFi ? post.content_fi : post.content_en,
    publish_time: new Date(post.publish_time).toLocaleString(locale, cardTimeOpts),
  }));

  return (
    <CardSection>
      {filteredFeed.map((post) => (
        <Card
          key={post.id}
          title={post.title}
          text={post.description}
          startTime={post.publish_time}
          link={`/feed/${post.id}`}
          buttonOnClick={noop}
          buttonText={buttonText}
        />
      ))}
      <aside>
        <PageLink to="/kilta/toiminta#uutiset" desc={allNewsDesc}>
          {allNewsText}
        </PageLink>
        <PageLink to="https://static.sahkoinsinoorikilta.fi/Poytakirjat/" desc={meetingNotesDesc}>
          {meetingNotesText}
        </PageLink>
        <PageLink to="https://sik.kuvat.fi" desc={galleryDesc}>
          {galleryText}
        </PageLink>
      </aside>
    </CardSection>
  );
};

export default Posts;
