import {
  Card,
  PageLink,
  CardSection,
} from "@components/index";
import Event from "@models/Event";
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 EventsProps = {
  events: Event[];
  lang: Lang
};

const Events: React.FC<EventsProps> = ({ events, lang }) => {
  const isFi = lang === "fi";
  const t = getTranslateFunc(lang);

  const buttonText = `${t("Lue lisää")}\xa0›`;
  const pageLinkText = t("Kaikki tapahtumat");
  const pageLinkDesc = `${t("löydät tapahtumakalenterista")}\xa0›`;

  const googleCalendarText = t("Lisää killan");
  const googleCalendarDesc = `${t("Google-kalenteri")}\xa0›`;

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

  const filteredEvents = events.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(locale, cardTimeOpts),
    endDate: new Date(e.end_time).toLocaleString(locale, cardTimeOpts),
  }));

  return (
    <CardSection id="#events">
      {filteredEvents.map((event) => (
        <Card
          key={event.id}
          title={event.title}
          startTime={new Date(event.start_time).toLocaleString(locale, cardTimeOpts)}
          text={event.description}
          link={`/events/${event.id}`}
          image={{
            src: event.image || event.tags[0].icon,
            alt: event.title,
          }}
          buttonOnClick={noop}
          buttonText={buttonText}
          data-e2e="event-card"
        />
      ))}
      <aside>
        <PageLink to="/kilta/toiminta#tapahtumat" desc={pageLinkDesc}>
          {pageLinkText}
        </PageLink>
        <PageLink to="https://calendar.google.com/calendar/u/0?cid=Y19mYjhhNWUwMjVjMjhkMTg5YTkzMWYyN2U5N2M4ODBmMGFhNTdmN2M1NDFlYzVhNjdlZDM4NzliYTVhNDEwNWI1QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20" desc={googleCalendarDesc}>
          {googleCalendarText}
        </PageLink>
      </aside>

    </CardSection>
  );
};

export default Events;
