import React from "react";
import Image from "next/legacy/image";
import styled from "styled-components";
import {
  Divider,
  CTASection,
  Link,
} from "@components/index";
import Events from "@components/Feed/Events";
import Posts from "@components/Feed/Posts";
import Event from "@models/Event";
import Post from "@models/Feed";
import colors from "@theme/colors";

import FullWidthSection from "@components/Sections/FullWidthSection";
import FrontPageHero from "./FrontPageHero";

// Corporate logos import
const ABB = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/abb.jpg";
const Caruna = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/caruna.jpg";
const Ensto = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/ensto.jpg";
const eSett = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/esett.jpg";
const Fingrid = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/fingrid.jpg";
const Okmetic = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/okmetic.jpg";
const Nokia = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/nokia.jpg";
const Granlund = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/granlund.jpg";
const GE = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/GE.png";

interface FrontPageViewProps {
  events: Event[];
  feed: Post[];
}

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

const SponsorReel = styled.div`
  text-align: center;

  & > div {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 4rem;

    & > * {
      margin: 1rem;
      min-width: 200px;
    }
  }

  a {
    color: ${colors.blue1};
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
`;

const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
  <>
    <FrontPageHero />
    <main>

      <Events events={events} lang="fi" />

      <CTASection
        bgColor="orange1"
        link="https://sosso.fi"
        linkText="Lue opiskelijalehden viimeisin numero&nbsp;›"
      >
        Sössöä vuodesta 1969.
      </CTASection>

      <Posts feed={feed} lang="fi" />

      <Divider />

      <FullWidthSection>
        <h6>Yhteistyössä:</h6>
        <SponsorReel>
          <div>
            <Link to="https://new.abb.com/fi/">
              <Image src={ABB} alt="ABB" layout="responsive" width={200} height={100} objectFit="contain" />
            </Link>
            <Link to="https://caruna.fi/">
              <Image src={Caruna} alt="Caruna" layout="responsive" width={200} height={100} objectFit="contain" />
            </Link>
            <Link to="https://www.nokia.com/">
              <Image src={Nokia} alt="Nokia" layout="responsive" width={200} height={100} objectFit="contain" />
            </Link>
            <Link to="https://www.ensto.com/fi/">
              <Image src={Ensto} alt="Ensto" layout="responsive" width={200} height={100} objectFit="contain" />
            </Link>
            <Link to="https://www.esett.com/">
              <Image src={eSett} alt="eSett" layout="responsive" width={200} height={100} objectFit="contain" />
            </Link>
            <Link to="https://www.fingrid.fi/">
              <Image src={Fingrid} alt="Fingrid" layout="responsive" width={200} height={100} objectFit="contain" />
            </Link>
            <Link to="https://www.okmetic.com/fi/">
              <Image src={Okmetic} alt="Okmetic" layout="responsive" width={200} height={100} objectFit="contain" />
            </Link>
            <Link to="https://www.granlund.fi/">
              <Image src={Granlund} alt="Granlund" layout="responsive" width={200} height={100} objectFit="contain" />
            </Link>
            <Link to="https://www.gehealthcare.fi/">
              <Image src={GE} alt="GE" layout="responsive" width={200} height={100} objectFit="contain" />
            </Link>
          </div>
          <Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
        </SponsorReel>
      </FullWidthSection>
    </main>
  </>
);

export default FrontPageView;