import React from "react";
import breakpoints from "@theme/breakpoints";
import styled from "styled-components";
import {
  Card,
  CardSection,
  CrossFadeImages,
  CTASection,
  Divider,
  Link,
  PageLink,
  TextSection,
} from "@components/index";
import Event from "@models/Event";
import Post from "@models/Feed";
import noop from "@utils/noop";
import InEnglishPageHero from "./InEnglishPageHero";

const Gallery = styled.div`
  display: flex;
  flex-flow: row nowrap;

  @media screen and (max-width: ${breakpoints.mobile}) {
    flex-flow: column;
    & > div {
      min-height: 100vw;
    }
  }

  & > div {
    flex: 1 0;
  }
`;

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

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

const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) => (
  <>
    <InEnglishPageHero />
    <main>
      <TextSection>
        <h3 id="guild">
          Guild
        </h3>
        <div>
          <p>
            What is a guild and what can it offer?
          </p>
          <div>
            <h6>Aalto University&apos;s Guild of Electrical Engineering</h6>
            <p>Aalto University&apos;s Guild of Electrical Engineering is an association of electrical engineering students in Aalto University. The guild was found in 1921 and it has now more than 500 members who are studying electrical engineering or are otherwise interested in the guild. The purpose of the guild is to serve the interests of its members at Aalto University and at the School of Electrical Engineering (ELEC). The guild also takes care of the well-being of its members, promotes professional skills and maintains teekkari spirit. To counterbalance studying the guild arranges various events like parties, sauna evenings and sports. The guild room at Maarintie 8 serves as a meeting place for guild members. In the guild room, members can study, spend time and meet other members. The guild organizes company visits and excursions. The guild uses same tools as in the business world. Professional competence and practicing electronics are supported also by maintaining electronics workshop where guild members can do their own projects.</p>
            <h6>Responsibilities</h6>
            <p>The guild&apos;s responsibilities include ensuring that its members receive quality education and that they graduate with excellence knowledge in their field. For new students, the guild organizes freshman education, which introduces students to teekkariculture and studying in at the university. The guild provides counterbalance to studies in the form of various events and conveys information to its members about possible jobs and companies in the field. The guild is run by students. As a guild volunteer, you gain experience, which is also extremely precious later in working life.</p>
            <h6>Guild board</h6>
            <p>The guild board is formed by 3-13 guild members, that are responsible for running the guild as an organization. The board consists of chairman, treasurer, secretary and other various roles. In addition, the board may have chairman of various committees of the guild, each with their own area of responsibility. The board normally meets once a week to make decisions and discuss issues related to the guild. If something is bothering your mind or you have a suggestion for improvement, the guild board is usually the right party to approach. In addition to the board, the daily life of the guild is run by a large number of staff, whose duties and responsibilites vary on their position. The board and guild officers are always elected for one year an electrocal meeting. Before the electrocal meeting, an application period for guild positions open to guild members is held. In addition to the year-long task, the guild has several sections where you can implement your ideas more freely without committing to a specific position.</p>
          </div>
        </div>
        <aside>
          <div>
            <PageLink to="https://api.sahkoinsinoorikilta.fi/members/application/" desc="and join our activities&nbsp;›">
              Become a member
            </PageLink>
          </div>
        </aside>
      </TextSection>

      <CTASection
        bgColor="lightTurquoise"
        link="https://sik.kuvat.fi/"
        linkText="Photo gallery&nbsp;›"
      >
        Photos from events.
      </CTASection>

      <Gallery>
        <CrossFadeImages
          presentationTime={5}
          fadeTime={1}
          images={[
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/elecyykka-jani-mannonen-6.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/koydenveto-jani-mannonen-miika-koskela-17.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/koydenveto-jani-mannonen-miika-koskela-28.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/koydenveto-jani-mannonen-miika-koskela-78.jpg",
          ]}
          width={400}
          height={400}
        />
        <CrossFadeImages
          presentationTime={5}
          fadeTime={1}
          images={[
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/koydenveto-mikko-haapamaki-33.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/Varaslahto2020-AinoSuomi-73.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/varauksenpurku_2020_timitiira-80.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/otatarhan-ajot-timi-tiira-172.jpg",
          ]}
          width={400}
          height={400}
        />
        <CrossFadeImages
          presentationTime={5}
          fadeTime={1}
          images={[
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/kokkarit_kiia_einola-0631.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/pota-jatkot-essi-jukkala-29.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/pota99-paajuhla-oskari-lahti-171.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/carousel_images/wappusitsit-jani-mannonen-29.jpg",
          ]}
          width={400}
          height={400}
        />
      </Gallery>

      <TextSection>
        <h3 id="activities">Corporate events and counterbalance for studies</h3>
        <div>
          <p>Balance your studies and get connected</p>
          <div>
            <h6>Build everything related to electronics</h6>
            <p>Elepaja is an electronics workshop run by the guild, where students get to apply skills they have learned at school in practical projects. Over time, students have built diverse projects in the workshop, such as their first LED flashlights, tesla windings, robots and radio transmitters. If you are interested in building electronics or you need help with a project, then come visit the workshop located at Otakaari 1 h023b. The workshop is equipped with basic tools such as circuit boards, etching tools, soldering tools, various components, column drill and a wide range of measuring equipment. You can join <Link to="https://elepaja.fi/tg">elepaja&apos;s Telegram group here</Link>.</p>
            <h6>Sports events</h6>
            <p>The committee of Well Being runs many things in our guild. One of these is providing sports events to the guild members. In cooperation with other guilds, we regularly organize opportunities to play floorball and other sports. Sports tryouts are available throughout the year and are organized in co-operation with various sports organizations in Otaniemi. Keep your eyes open in the <Link to="#events">events</Link> section and join the <Link to="https://t.me/joinchat/DJRXxkKd0SMj0e9pBPXF1A/"> sports Telegram group.</Link></p>
            <h6>Culture from culinarism to theater</h6>
            <p>In addition to sports events, the committee of Well Being also organizes cultural events for guild members. These cultural events include various types of events such as theater and museum visits. You can see the upcoming cutrural events from the <Link to="#events">events</Link> section.</p>
            <h6>Cooperation with companies</h6>
            <p>The guilds Corporate Relations committee is responsible for keeping the guild&apos;s economy afloat, but in addition to that they also offer guild members opportunities to network with top companies in the industry. Such opportunities are organized in the form of excursions, where guild members take tours in to the company&apos;s own premises and get to know the operations and staff, as well as in form of various corporate relations events in Otaniemi such as sauna evenings and annual corporate brunch. You can see the upcoming events in the <Link to="#events">events</Link> section.</p>
            <h6>Internationalize and build relationships</h6>
            <p>To the delight of the guild members, External Affairs committee organizes events with many organizations both in Finland and abroad. In these events you can make friends internationally. The External Affairs committee also organizes a lot of activites for exchange students that are definitely worth participating if you want to make friends around the globe.</p>
          </div>
        </div>
      </TextSection>

      <Gallery>
        <CrossFadeImages
          presentationTime={5}
          fadeTime={1}
          images={[
            "https://static.sahkoinsinoorikilta.fi/img/tour/qtour1.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/tour/qtour2.jpg",
          ]}
          width={400}
          height={400}
        />
        <CrossFadeImages
          presentationTime={5}
          fadeTime={1}
          images={[
            "https://static.sahkoinsinoorikilta.fi/img/tour/qtour3.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/tour/qtour4.jpg",
          ]}
          width={400}
          height={400}
        />
        <CrossFadeImages
          presentationTime={5}
          fadeTime={1}
          images={[
            "https://static.sahkoinsinoorikilta.fi/img/tour/qtour5.jpg",
            "https://static.sahkoinsinoorikilta.fi/img/tour/qtour1.jpg",
          ]}
          width={400}
          height={400}
        />
      </Gallery>

      <TextSection>
        <h3 id="finland">About Finland</h3>
        <div>
          <h6>Quick tour</h6>
          <p>Finland is a country with roughly 5,5 million inhabitants. Most of the people live in southern part of Finland, where the biggest cities Helsinki, Espoo, Vantaa, Turku and Tampere are. There are also notable cities in middle and northern parts like Oulu, Jyväskylä and Kuopio. Finland is often called the land of thousand lakes, because of its rougly 160000 lakes. Many of Finnish people own summer cottage, to which they flee for the summer. That is why many of the major cities are often empty during summer, especially in July. The reason why people often flee to their summer cottages is that they seek nature and silence to counterbalance their hectic worklife. Nature is one of the best things in Finland. We have four seasons, that differ from each other. That also means that the temperature rajge varies from -30 to 30 centigrade. Even though the lower spectrum might be suitable for polar bears, unfortunately there are none in Finland (except in the RanuaZoo).</p>
        </div>
      </TextSection>

      <TextSection>
        <h3 id="freshmen">For exchange student</h3>
        <div>
          <div>
            <h6>Freshman points</h6>
            <p>What is student life like in Finland? What are the unique cool things to experience? To find out we recommend collecting the fuksi points (freshman points) to your fuksi point card. It&apos;s fun! The point card gives you a guideline to experiencing the student life and allows you to get a diploma with the privilege to wear the teekkari cap. Note that internationals are also fuksis on their first year in Aalto even though they are not really freshmen. Even Finns who change to a different study program get to be a fuksi again.</p>
            <h6>Overalls</h6>
            <p>The overalls are a special outfit that show which guild you belong to. They can be customized by sewing badges and attaching all kinds of items and decorations to them. In SIK we wear &quot;clean white&quot; overalls.</p>
            <h6>Teekkari cap</h6>
            <p>The teekkari cap is a white cap with a black tassel. It is the symbol of a teekkari and highly valued amongst us. Freshmen and internationals who complete their fuksi points get to put their new caps on during Wappu. Wappu is the biggest set of events of the student year. It begins in the last weeks of April and ends on the 1st of May.</p>
            <h6>International tutors</h6>
            <p>International tutors are volunteers that help international students in getting started with their studies and student life here at Aalto University, as well as getting settled in Finland. Tutors can also help with practical matters such as housing. The tutors will contact international students before their studies start.</p>
          </div>
        </div>

      </TextSection>

      <Divider />

      <CardSection id="events">
        {events.map((event) => (
          <Card
            key={event.id}
            title={event.title_en}
            startTime={new Date(event.start_time).toLocaleString("en-GB", cardTimeOpts)}
            text={event.description_en}
            link={`/events/${event.id}`}
            image={{
              src: event.image || event.tags[0].icon,
              alt: event.title_en,
            }}
            buttonOnClick={noop}
            buttonText="Read more&nbsp;›"
            data-e2e="event-card"
          />
        ))}
        <aside>
          <PageLink to="/kilta/toiminta#tapahtumat" desc="you can find all events from the event calendar&nbsp;›">
            All events
          </PageLink>
        </aside>
      </CardSection>
      <CTASection
        bgColor="orange1"
        link="https://sosso.fi"
        linkText="Read the newest number of the guild magazine&nbsp;›"
      >
        Sössö since 1969.
      </CTASection>
      <CardSection>
        {feed.map((inst) => (
          <Card
            key={inst.id}
            title={inst.title_en}
            startTime={new Date(inst.publish_time).toLocaleString("en-GB", cardTimeOpts)}
            text={inst.description_en}
            link={`/feed/${inst.id}`}
            buttonOnClick={noop}
            buttonText="Read more&nbsp;›"
          />
        ))}
        <aside>
          <PageLink to="/kilta/toiminta#uutiset" desc="news&nbsp;›">
            Read news
          </PageLink>
          <PageLink to="https://static.sahkoinsinoorikilta.fi/Poytakirjat/" desc="and what the board has been up to&nbsp;">
            Board meeting records
          </PageLink>
          <PageLink to="https://sik.kuvat.fi" desc="in the photo gallery&nbsp;›">
            Photos from events
          </PageLink>
        </aside>
      </CardSection>
    </main>
  </>
);

export default InEnglishPageView;
