import React from 'react'
import { Card, Grid, Text, Box } from 'theme-ui'
import CodeIcon from '../images/icons/code.inline.svg'
import GithubIcon from '../images/icons/github.inline.svg'
import IssueIcon from '../images/icons/issue.inline.svg'
import StarIcon from '../images/icons/star.inline.svg'
import { logoMapper } from '../data/languageLogoList.js'

const openGithubPage = githubLink => {
  window.open(githubLink, '_blank')
}

const RepoCard = ({ repo }) => {
  return (
    <Card
      sx={{
        backgroundColor: 'cardBackground',
        fontFamily: 'inter',
        borderRadius: 8,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'cardBorder',
        padding: '15px 15px 25px 20px',
        ':hover': {
          cursor: 'pointer',
        },
      }}
      onClick={() => openGithubPage(repo.html_url)}
    >
      <Box
        sx={{
          paddingBottom: 25,
          height: '80%',
        }}
      >
        <Text sx={{ wordBreak: 'break-all', fontSize: 20, py: '8px' }}>
          {repo.name}
        </Text>
        <Text
          sx={{
            wordBreak: 'break-all',
            fontSize: 16,
            py: '4px',
            color: '#9d1e1e',
          }}
        >
          {repo.full_name}
        </Text>
        <Text
          sx={{ pt: '4px', color: '#805f5f', lineHeight: '20px', fontSize: 14 }}
        >
          {repo.description}
        </Text>
      </Box>
      <Grid
        columns={4}
        sx={{
          borderTop: 'solid 1px rgba(255, 255, 255, 0.05)',
          paddingTop: 15,
          textAlign: 'center',
          fontSize: 14,
        }}
      >
        <Text>
          <span
            role="img"
            aria-label="star"
            style={{ verticalAlign: 'middle' }}
          >
            <StarIcon />
          </span>{' '}
          {repo.stargazers_count}
        </Text>
        <Text>
          <span
            role="img"
            aria-label="issues"
            style={{ verticalAlign: 'middle' }}
          >
            <IssueIcon />
          </span>{' '}
          {repo.open_issues_count}
        </Text>
        <a href={repo.html_url} style={{ color: 'currentColor' }}>
          <Text>
            <span
              role="img"
              aria-label="github"
              style={{ verticalAlign: 'middle' }}
            >
              <GithubIcon />
            </span>{' '}
            Github
          </Text>
        </a>
        {displayLogo()}
      </Grid>
    </Card>
  )

  function displayLogo() {
    //check if logoMapper contains the repo.language as a key
    if (logoMapper[repo.language] !== undefined) {
      return (
        <Text>
          <span
            className="tooltip"
            role="img"
            aria-label="language"
            style={{ verticalAlign: 'middle' }}
          >
            <img
              width="16px"
              height="16px"
              src={logoMapper[repo.language]}
              alt={repo.language}
            />
            {checkNullLang()}
          </span>
        </Text>
      ) //checkNullLang() for tool tip visibility.
    }
    //when either repo.language is null or not in logoMapper just displaying code icon with repo.language with no tooltip
    else {
      return (
        <Text>
          <span
            role="img"
            aria-label="code"
            style={{ verticalAlign: 'middle' }}
          >
            <CodeIcon />
          </span>{' '}
          {repo.language}
        </Text>
      )
    }
  }

  function checkNullLang() {
    if (repo.language !== null)
      return <span className="tooltiptext">{repo.language}</span>
  }
}
export default RepoCard