import React from "react";
import Image from "next/image";
import styled from "styled-components";
import colors from "@theme/colors";
import Event from "@models/Event";
import Button from "@components/Button";
import { Link, TextSection } from "@components/index";
import noop from "@utils/noop";

import MarkdownStyles from "@views/common/MarkdownStyles";
import LoadingView from "@views/common/LoadingView";

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 EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
  if (!event) return <LoadingView />;
  const date_start = new Date(event.start_time).toLocaleString("fi-FI");
  const date_end = new Date(event.end_time).toLocaleString("fi-FI");
  return (
    <StyledTextSection>
      <h1>
        {event.title_fi}
        <p>
          {event.description_fi}
        </p>
        <Image
          src={event.image || event.tags[0].icon}
          alt={event.title_fi}
          objectFit="scale-down"
          layout="responsive"
          width={16}
          height={9}
        />
      </h1>
      <div>
        <Content source={event.content_fi} escapeHtml={false} />
        <p>
          Paikka: {event.location_fi}
        </p>
        <p>
          <time>Alkaa: {date_start}</time>
        </p>
        <p>
          <time>Päättyy: {date_end}</time>
        </p>
        {/* We may have multiple signup forms. Generate own Button for each one */}
        <SignupButtons>
          {event.signupForm.map((sf) => (
            <Link key={sf.id} to={`/signup/${sf.id}`}>
              <Button buttonStyle="filled" onClick={noop}>
                {sf.title_fi}
              </Button>
            </Link>
          ))}
        </SignupButtons>
      </div>
    </StyledTextSection>
  );
};
export default EventPageView;