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

import FullWidthSection from "@components/Sections/FullWidthSection";
import noop from "@utils/noop";
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 Eaton = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/eaton.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 NRCGroup = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/nrcgroup.jpg";
const Okmetic = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/okmetic.jpg";

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

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 />
    <CTASection
      bgColor="sik100Blue"
      link="https://sik100.fi"
      linkText="Mikä ihmeen SIK100?&nbsp;›"
    >
      SIK100
    </CTASection>
    <main>
      <CardSection>
        {events.map((event) => (
          <Card
            key={event.id}
            title={event.title_fi}
            start_time={event.start_time}
            text={event.description_fi}
            link={`/events/${event.id}`}
            image={event.image || event.tags[0].icon}
            buttonOnClick={noop}
            data-e2e="event-card"
          />
        ))}
        <aside>
          <PageLink to="/kilta/toiminta#tapahtumat" desc="löydät tapahtumakalenterista&nbsp;›">
            Kaikki tapahtumat
          </PageLink>
        </aside>

      </CardSection>

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

      <CardSection>
        {feed.map((inst) => (
          <Card
            key={inst.id}
            title={inst.title_fi}
            start_time={inst.publish_time}
            text={inst.description_fi}
            link={`/feed/${inst.id}`}
            buttonOnClick={noop}
          />
        ))}
        <aside>
          <PageLink to="/kilta/toiminta#uutiset" desc="uutiset&nbsp;›">
            Lue tuoreimmat uutiset
          </PageLink>
          <PageLink to="https://static.sahkoinsinoorikilta.fi/Poytakirjat/" desc="ja hallitukset kuulumiset&nbsp;">
            Hallituksen pöytäkirjat
          </PageLink>
          <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
            Kuvia tapahtumista
          </PageLink>
        </aside>
      </CardSection>

      <Divider />

      <FullWidthSection>
        <h6>Yhteistyössä:</h6>
        <SponsorReel>
          <div>
            <Link to="https://new.abb.com/fi/uralle">
              <Image src={ABB} alt="ABB" layout="responsive" width={200} height={100} objectFit="contain" />
            </Link>
            <Link to="https://www.caruna.fi/tietoa-meista/tyonhakijalle/tyonantajalupaus">
              <Image src={Caruna} alt="Caruna" layout="responsive" width={200} height={100} objectFit="contain" />
            </Link>
            <Link to="https://www.eaton.com/us/en-us.html">
              <Image src={Eaton} alt="Eaton" 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.nrcgroup.fi/">
              <Image src={NRCGroup} alt="NRCGroup" 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>
          </div>
          <Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
        </SponsorReel>
      </FullWidthSection>
    </main>
  </>
);

export default FrontPageView;