import React, { useState } from "react";

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

interface EventCalendarProps {
  events: Event[];
}

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

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

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

  const filteredEvents = events.slice(0, numberShown).map((e) => ({
    ...e,
    title: isFi ? e.title_fi : e.title_en,
    description: isFi ? e.description_fi : e.description_en,
    content: isFi ? e.content_fi : e.content_en,
    location: isFi ? e.location_fi : e.location_en,
    startDate: new Date(e.start_time).toLocaleString(isFi ? "fi-FI" : "en-GB", options),
    endDate: new Date(e.end_time).toLocaleString(isFi ? "fi-FI" : "en-GB", options),
  }));

  return (
    <FullWidthSection>
      <h1 id="tapahtumat">
        {t("Tapahtumat")}
        {/* <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>
        {filteredEvents.map((e) => (
          <Card
            key={e.id}
            title={e.title}
            startTime={e.startDate}
            text={e.description}
            link={`/events/${e.id}`}
            buttonOnClick={noop}
            buttonText={`${t("Lue lisää")} ›`}
          />
        ))}
      </CardSection>
      { numberShown < events.length && (
        <FilterContainer>
          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8); }}>
            {t("Lataa lisää")}
          </Button>
        </FilterContainer>
      )}
    </FullWidthSection>
  );
};

export default EventCalendar;
