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 BoardJson from "./board.json";
import HvtmkJson from "./hvtmk.json";
import MtmkJson from "./mtmk.json";
import OptmkJson from "./optmk.json";
import OtmkJson from "./otmk.json";
import PtmkJson from "./ptmk.json";
import SstmkJson from "./sstmk.json";
import TtmkJson from "./ttmk.json";
import UtmkJson from "./utmk.json";
import YtmkJson from "./ytmk.json";

const blank_profile = "/img/blank_profile.png";

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

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

const Container = styled.div`
  color: ${colors.darkBlue};

  & > h2 {
    text-transform: uppercase;
    width: 100%;
  }

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

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

interface Committee {
  name_fi: string;
  name_en: 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 ContactsPageView: React.FC = () => (
  <>
    <TextSection>
      <h1>Yhteystiedot</h1>
      <p>
        Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
        Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
      </p>
    </TextSection>

    <TextSection>
      <CommitteeContainer committee={BoardJson}>
        <p>
          {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
          <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
            hallitus@sahkoinsinoorikilta.fi
          </BlueLink>
        </p>
      </CommitteeContainer>
    </TextSection>

    <Divider />

    <TextSection>
      <CommitteeContainer committee={HvtmkJson} />
    </TextSection>

    <Divider />

    <TextSection>
      <CommitteeContainer committee={MtmkJson} />
    </TextSection>

    <Divider />

    <TextSection>
      <CommitteeContainer committee={OptmkJson} />
    </TextSection>

    <Divider />

    <TextSection>
      <CommitteeContainer committee={OtmkJson} />
    </TextSection>

    <Divider />

    <TextSection id="eptmk">
      <CommitteeContainer committee={PtmkJson} />
    </TextSection>

    <Divider />

    <TextSection>
      <CommitteeContainer committee={SstmkJson} />
    </TextSection>

    <Divider />

    <TextSection id="ttmk">
      <CommitteeContainer committee={TtmkJson} />
    </TextSection>

    <Divider />

    <TextSection>
      <CommitteeContainer committee={UtmkJson} />
    </TextSection>

    <Divider />

    <TextSection>
      <CommitteeContainer committee={YtmkJson} />
    </TextSection>

    <Divider />
  </>
);

export default ContactsPageView;