import React from "react";
import styled from "styled-components";
import Layout from "@theme/Layout";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import GitHubLogo from "../assets/icons/github-logo.svg";

import IconCode from "../assets/icons/code.svg";
import IconStar from "../assets/icons/star.svg";
import IconDatabase from "../assets/icons/database.svg";
import IconTerminal from "../assets/icons/terminal.svg";
import IconPuzzle from "../assets/icons/puzzle.svg";
import IconEye from "../assets/icons/eye.svg";
import IconDocumentText from "../assets/icons/document-text.svg";

const PageTitle = styled.h1`
  margin-top: 2rem;
  font-size: 4rem;
  font-weight: 800;
  text-transform: uppercase;
`;

const PageSubtitle = styled.div`
  margin-bottom: 3rem;
`;

const Page = styled.div`
  max-width: var(--ifm-container-width);
  margin: 0 auto;
  padding: 2rem var(--ifm-spacing-horizontal);
  width: 100%;
`;

const MembersContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  @media (max-width: 812px) {
    grid-template-columns: repeat(2, 1fr);
  }
`;
const MemberCard = styled.a`
  border-radius: 0.75rem;
  border: 1px solid #eee;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  min-width: calc(108px + 2rem);
  cursor: pointer;
  height: 100%;
  &:hover {
    color: inherit;
    text-decoration: none;
  }
`;

const Avatar = styled.img`
  height: 108px;
  width: 108px;
  border-radius: 50%;
`;
const MemberName = styled.div`
  font-size: 1rem;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: -4px;
  line-height: 1rem;
`;
const Username = styled.div`
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 8px;
`;

const SectionTitle = styled.h2`
  margin-bottom: 24px;
  margin-top: 84px;
`;
const SectionSubtitle = styled.p`
  opacity: 0.68;
  margin-top: -12px;
`;

const RepoCardsContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
`;
const RepoCard = styled.a`
  border-radius: 0.75rem;
  border: 1px solid #eee;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  font-weight: 500;
  padding: 1rem;
  margin: 8px;
  cursor: pointer;
  color: #374151;
  transition: all 0.3s;

  &:hover {
    opacity: 0.98;
    color: inherit;
    text-decoration: none;
    color: #111827;
  }

  svg {
    margin-right: 8px;
    transition: all 0.3s;
  }
`;

const ContributeCard = styled.div`
  display: flex;
  background: #100f14;
  border-radius: 0.75rem;
  margin-top: 6rem;
  margin-bottom: 3rem;
  color: white;
  padding: 2rem 2.4rem;
`;
const ContributeCardTitle = styled.div`
  font-size: 2.4rem;
  font-weight: 700;
`;
const ContributeCardSubtitle = styled.div`
  opacity: 0.78;
  font-size: 14px;
  margin-top: 1rem;
`;
const ContributeCardButton = styled.a`
  padding: 12px 24px;
  font-size: 20px;
  line-height: 20px;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 2px solid white;
  background: transparent;
  color: white;
  transition: all 0.3s;
  margin-top: 2.4rem;
  cursor: pointer;
  display: inline-block;
  &:hover {
    background: white;
    color: black;
    text-decoration: none;
  }
`;

const ContributeCardLeftSide = styled.div`
  flex: 3;
`;

const ContributeCardRightSide = styled.div`
  @keyframes icon-animation {
    0% {
      color: #ef4444;
    }
    14% {
      color: #f59e0b;
    }
    28% {
      color: #10b981;
    }
    42% {
      color: #3b82f6;
    }
    57% {
      color: #6366f1;
    }
    71% {
      color: #8b5cf6;
    }
    85% {
      color: #ec4899;
    }
    100% {
      color: #ef4444;
    }
  }
  flex: 1;
  position: relative;
  @media (max-width: 812px) {
    display: none;
  }
  svg {
    position: absolute;
    color: white;
    height: 24px;
    transition: all 0.3s;
  }
  svg:hover {
    animation-name: icon-animation;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  #icon-code {
    height: 72px;
    top: 12px;
    right: 12px;
    transform: rotate(15deg);
  }
  #icon-star {
    height: 56px;
    top: 108px;
    right: 34px;
    transform: rotate(45deg);
  }
  #icon-database {
    height: 42px;
    top: 66px;
    right: 108px;
    transform: rotate(10deg);
  }
  #icon-terminal {
    height: 32px;
    bottom: 0;
    left: 88px;
    transform: rotate(-16deg);
  }
  #icon-puzzle {
    height: 28px;
    left: 88px;
    transform: rotate(-10deg);
  }
  #icon-eye {
    height: 38px;
    right: 16px;
    bottom: 12px;
    transform: rotate(10deg);
  }
  #icon-document-text {
    height: 22px;
    bottom: 58px;
    left: 124px;
    transform: rotate(12deg);
  }
`;

function Team(props) {
  const { siteConfig } = useDocusaurusContext();
  const memberSections = siteConfig.customFields.team.map((section) => {
    const memberCards = section.members.map((member) => {
      return (
        <div key={member.username}>
          <MemberCard
            href={`https://github.com/${member.githubUsername}`}
            target="_blank"
          >
            <Avatar src={member.avatarUrl} />
            <MemberName>{member.name}</MemberName>
            <Username>@{member.username}</Username>
          </MemberCard>
        </div>
      );
    });
    return (
      <div key={section.groupName}>
        <SectionTitle>{section.groupName}</SectionTitle>
        <MembersContainer id={section.groupName}>
          {memberCards}
        </MembersContainer>
      </div>
    );
  });
  const repoComponents = siteConfig.customFields.allRepos.map((repo) => {
    return (
      <RepoCard
        href={`https://github.com/${repo}/graphs/contributors`}
        target="_blank"
        key={repo}
      >
        <GitHubLogo /> {repo}
      </RepoCard>
    );
  });
  return (
    <Page>
      <PageTitle>Team</PageTitle>
      <PageSubtitle>We love open source.</PageSubtitle>
      {memberSections}
      <SectionTitle>Contributors</SectionTitle>
      <SectionSubtitle>
        You can find all contributors of Apache APISIX from GitHub contribution
        list.
      </SectionSubtitle>
      <RepoCardsContainer>{repoComponents}</RepoCardsContainer>
      <ContributeCard>
        <ContributeCardLeftSide>
          <ContributeCardTitle>🛠 Become A Committer </ContributeCardTitle>
          <ContributeCardSubtitle>
            The Apache APISIX community follows the Apache Community’s process
            on accepting a new committer. After a contributor participates
            APISIX's community actively, PMC and Committers will make decisions
            to invite the contributor join Committers and PMC.
          </ContributeCardSubtitle>
          <ContributeCardButton href="/docs/general/contributor-guide">
            Start Contribute
          </ContributeCardButton>
        </ContributeCardLeftSide>
        <ContributeCardRightSide>
          <IconCode id="icon-code" />
          <IconStar id="icon-star" />
          <IconDatabase id="icon-database" />
          <IconTerminal id="icon-terminal" />
          <IconPuzzle id="icon-puzzle" />
          <IconEye id="icon-eye" />
          <IconDocumentText id="icon-document-text" />
        </ContributeCardRightSide>
      </ContributeCard>
    </Page>
  );
}

export default (props) => (
  <Layout>
    <Team {...props} />
  </Layout>
);