import React, { useState } from "react";
import Post from "@models/Feed";

import {
  Button, CardSection, Card, FullWidthSection,
} from "@components/index";
import noop from "@utils/noop";
import { useTranslation } from "../../i18n";
import FilterContainer from "./FilterContainer";

interface NewsProps {
  feed: Post[];
}

const News: React.FC<NewsProps> = ({ feed }) => {
  // const [filterSelected, setFilter] = useState(0);
  const [numberShown, setNumberShown] = useState(8);

  const { i18n, t } = useTranslation();
  const isFi = i18n.language === "fi";

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

  const filteredFeed = feed.slice(0, numberShown).map((p) => ({
    ...p,
    title: isFi ? p.title_fi : p.title_en,
    description: isFi ? p.description_fi : p.description_en,
    content: isFi ? p.content_fi : p.content_en,
    publishTime: new Date(p.publish_time).toLocaleString(isFi ? "fi-FI" : "en-GB", options),
  }));
  return (
    <FullWidthSection>
      <h1 id="uutiset">
        {t("Uutiset")}
        {/* <FilterContainer>
          <Button buttonStyle="filter" onClick={() => { setFilter(0); }} selected={filterSelected === 0}>
            Näytä kaikki
          </Button>
          <Button buttonStyle="filter" onClick={() => { setFilter(1); }} selected={filterSelected === 1}>
            Järjestä aihettain&nbsp;›
          </Button>
          <Button buttonStyle="filter" onClick={() => { setFilter(2); }} selected={filterSelected === 2}>
            Valitse aika&nbsp;›
          </Button>
        </FilterContainer> */}
      </h1>
      <CardSection>
        {filteredFeed.map((post) => (
          <Card
            key={post.id}
            title={post.title}
            startTime={post.publishTime}
            text={post.description}
            link={`/feed/${post.id}`}
            buttonOnClick={noop}
            buttonText={`${t("Lue lisää")} ›`}
          />
        ))}
      </CardSection>
      { numberShown < feed.length && (
        <FilterContainer>
          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8); }}>
            {t("Lataa lisää")}
          </Button>
        </FilterContainer>
      )}
    </FullWidthSection>
  );
};

export default News;
