import React from "react";
import Image from "next/image";
import styled from "styled-components";
import rehypeRaw from "rehype-raw";
import rehypeSanitize from "rehype-sanitize";
import colors from "@theme/colors";
import Event from "@models/Event";
import {
  Button, Link, TextSection, ChangeLanguageButton,
} from "@components/index";
import noop from "@utils/noop";
import MarkdownStyles from "@views/common/MarkdownStyles";
import LoadingView from "@views/common/LoadingView";
import { useTranslation } from "../../i18n";

interface EventPageViewProps {
  event?: Event;
}

const StyledTextSection = styled(TextSection)`
  align-items: center;

  & > h1 {
    color: ${colors.darkBlue};
    p {
      color: ${colors.orange1};
    }
  }

  & > div {
    margin: auto;

    & > p {
      font-size: 0.9rem;
      font-weight: bold;
      line-height: 0.4rem;
    }
  }
`;

const SignupButtons = styled.div`
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
`;

const Content = styled(MarkdownStyles)`
  margin-top: 1.5rem;
`;

const LngButton = styled(ChangeLanguageButton)`
  align-self: flex-end;
  margin-right: 1rem;
`;

const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
  const { i18n, t } = useTranslation();
  if (!event) return <LoadingView />;
  const isFi = i18n.language === "fi";
  const {
    title, description, content, location, startDate, endDate,
  } = {
    title: isFi ? event.title_fi : event.title_en,
    description: isFi ? event.description_fi : event.description_en,
    content: isFi ? event.content_fi : event.content_en,
    location: isFi ? event.location_fi : event.location_en,
    startDate: new Date(event.start_time).toLocaleString(isFi ? "fi-FI" : "en-GB"),
    endDate: new Date(event.end_time).toLocaleString(isFi ? "fi-FI" : "en-GB"),
  };

  return (
    <>
      <LngButton />
      <StyledTextSection>
        <h1>
          {title}
          <p>
            {description}
          </p>
          <Image
            src={event.image || event.tags[0].icon}
            alt={title}
            objectFit="scale-down"
            layout="responsive"
            width={16}
            height={9}
          />
        </h1>
        <div>
          <Content rehypePlugins={[rehypeRaw, rehypeSanitize]}>{content}</Content>
          <p>
            {`${t("Paikka")}: ${location}`}
          </p>
          <p>
            <time>{`${t("Alkaa")}: ${startDate}`}</time>
          </p>
          <p>
            <time>{`${t("Päättyy")}: ${endDate}`}</time>
          </p>
          {/* We may have multiple signup forms. Generate own Button for each one */}
          <SignupButtons>
            {event.signupForm
              .sort((a, b) => (isFi ? a.title_fi.localeCompare(b.title_fi) : a.title_en.localeCompare(b.title_en)))
              .map((sf) => (
                <Link key={sf.id} to={`/signup/${sf.id}`}>
                  <Button data-e2e="signup-button" buttonStyle="filled" onClick={noop}>
                    {isFi ? sf.title_fi : sf.title_en}
                  </Button>
                </Link>
              ))}
          </SignupButtons>
        </div>
      </StyledTextSection>
    </>
  );
};
export default EventPageView;