import React from "react";
import styled from "styled-components";
import { Divider, TextSection, Link } from "@components/index";
import colors from "@theme/colors";
import ContactCard from "@components/ContactCard";

import FtmkJson from "./ftmk.json";
import HtmkJson from "./htmk.json";
import HvtmkJson from "./hvtmk.json";
import MtmkJson from "./mtmk.json";
import OptmkJson from "./optmk.json";
import NtmkJson from "./ntmk.json";
import PtmkJson from "./ptmk.json";
import TtmkJson from "./ttmk.json";
import YtmkJson from "./ytmk.json";
import SwtmkJson from "./swtmk.json";
import VtmkJson from "./vtmk.json";
import LtmkJson from "./ltmk.json";
import SiccJson from "./sicc.json";
import SptmkJson from "./sptmk.json";
import PotatmkJson from "./potatmk.json";
import Others from "./others.json";

const orderedCommittees = [
  FtmkJson,
  HtmkJson,
  LtmkJson,
  HvtmkJson,
  MtmkJson,
  OptmkJson,
  YtmkJson,
  TtmkJson,
  PtmkJson,
  VtmkJson,
  SwtmkJson,
  NtmkJson,
  SiccJson,
  SptmkJson,
  PotatmkJson,
  Others,
];

const BlueLink = styled(Link)`
  color: ${colors.blue1};

  &:hover {
    color: ${colors.lightBlue};
  }
`;

const IndexUL = styled.ul`
  padding: 0;
  list-style: none;

  li::before {
    content: attr(data-icon);
    margin-right: 4px;
  }
`;

const Index: React.FC<{ committees: typeof orderedCommittees }> = ({ committees }) => (
  <IndexUL>
    {committees.map(({ slug, name_fi }) => (
      <BlueLink to={`#${slug}`} key={slug}>
        <li data-icon="»">
          {name_fi}
        </li>
      </BlueLink>
    ))}
  </IndexUL>
);

const Container = styled.div`
  color: ${colors.darkBlue};
  align-items: center;
  justify-content: center;
  width: 50vw;

  & > h2 {
    text-transform: uppercase;
    font-size: 4rem;
    width: 100%;
  }

  & > div {
    display: flex;
    flex-flow: row wrap;
  }

  @media (max-width: 950px) {
    width: 100vw;
  }
`;

const ContactContainer = styled.div`
  overflow-x: hidden;
  @media (max-width: 950px) {
    margin-top: 0;
  }
`;

const TitleContainer = styled.div`
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 10px 10px;
  flex-direction: column;
  margin: auto;
`;

const CommitteeContainer: React.FC<{
  committee: Committee;
  children: React.ReactNode;
}> = ({ committee, children }) => (
  <Container>
    <TitleContainer>
      <h2>
        {committee.name_fi || committee.name_en}
      </h2>
    </TitleContainer>
    <p>
      {committee.info}
    </p>
    <div>
      {committee.roles.map((role) => (
        role.representatives.map((representative) => (
          <ContactCard
            key={representative.name}
            name={representative.name}
            phone={representative.phone_number}
            email={representative.email}
            image={null}
            role_fi={role.name_fi}
            role_en={role.name_en}
          />
        ))
      ))}
    </div>
    {children}
  </Container>
);

interface Committee {
  name_fi: string;
  name_en: string;
  info: string;
  roles: Array<Role>;
}

interface Role {
  name_fi: string;
  name_en: string;
  representatives: Array<Representative>
}

interface Representative {
  name: string;
  phone_number?: string;
  email?: string;
  image?: string;
}

const CommitteePageView: React.FC = () => (
  <>
    <TextSection>
      <h1>Toimihenkilöt</h1>
      <p>
        Tältä sivulta löytyvät killan toimihenkilöt sekä lyhyet kuvaukset toimikunnista.
        <br />
        <br />
        Toimihenkilöiden sähköpostiosoitteet ovat muotoa etunimi.sukunimi@sahkoinsinoorikilta.fi.
      </p>
      <aside>
        <div>
          <h6>Toimikuntaluettelo</h6>
          <Index committees={orderedCommittees} />
        </div>
      </aside>
    </TextSection>
    <ContactContainer>
      {orderedCommittees.map((json) => (
        <React.Fragment key={json.slug}>
          {(json.slug !== "board") && (
            <Divider />
          )}
          <TextSection id={json.slug}>
            <CommitteeContainer committee={json}>
              {(json.slug === "board") && (
                <div>
                  <p>
                    {"Koko hallitukseen saa yhteyden lähettämällä sähköpostia osoitteeseen "}
                    <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
                      hallitus@sahkoinsinoorikilta.fi
                    </BlueLink>
                    .
                  </p>
                  <p>
                    {"Hallitukselle voi myös lähettää palautetta täyttämällä "}
                    <BlueLink to="https://docs.google.com/forms/d/e/1FAIpQLSeD8Hm66uvwr7Xa2WGgOCfI2RS1NrZsmISf2QBKUcJf_stv8g/viewform?usp=sf_link">
                      palautelomakkeen
                    </BlueLink>
                    . Lomakkeen vastauksia käydään läpi hallituksen kokouksissa.
                  </p>
                  <p>
                    Toimihenkilöiden sähköpostiosoitteet ovat muotoa etunimi.sukunimi@sahkoinsinoorikilta.fi.
                  </p>
                </div>
              )}
            </CommitteeContainer>
          </TextSection>
        </React.Fragment>
      ))}
    </ContactContainer>
  </>
);

export default CommitteePageView;