content: import React, { Component } from 'react';
  import styled from 'styled-components';
  import { allContinents, allGameModes } from '../../common/consts';
  import { getFreshQuestion } from '../../helpers/questions';
  import { permute } from '../../helpers/utils';
  import { createStaticUrl } from '../../helpers/encrypt';
  import { encrypt } from '../../helpers/encrypt';
  import { BASE_URL } from '../../common/consts';
  import data from '../../static/json/data.json';
  
  const permConts = permute(allContinents);
  const permGMs = permute(allGameModes);
  const getOps = () => {
    let ops = [];
    let gmInc = 0;
    while (gmInc < permGMs.length) {
      let contInc = 0;
      while (contInc < permConts.length) {
        const op = {
          gameModes: permGMs[gmInc],
          continents: permConts[contInc],
        };
        ops.push(op);
        contInc++;
      }
  
      gmInc++;
    }
    return ops;
  };
  
  class SiteMap extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      let { openSiteMap, clickAction } = this.props;
      return (
        <SitemapWrapper>
          <SitemapButton onClick={clickAction}>Sitemap</SitemapButton>
          {openSiteMap === true && (
            <SitemapListHolder>
              <SitemapList>
                {getOps().map(op => {
                  return (
                    <SitemapListItem
                      key={
                        'option' +
                        op.continents.join('-') +
                        op.gameModes.join('-')
                      }
                    >
                      <a
                        href={
                          BASE_URL +
                          '/' +
                          createStaticUrl({
                            gameModes: op.gameModes,
                            continents: op.continents,
                            gameStatus: 'START_SCREEN',
                          })
                        }
                        title={
                          op.gameModes.join(', ').replace(/,([^,]*)$/, ' and$1') +
                          ' of ' +
                          op.continents.join(', ').replace(/,([^,]*)$/, ' and$1')
                        }
                      >
                        {op.gameModes.join(', ').replace(/,([^,]*)$/, ' and$1')}{' '}
                        of{' '}
                        {op.continents.join(', ').replace(/,([^,]*)$/, ' and$1')}
                      </a>
                    </SitemapListItem>
                  );
                })}
              </SitemapList>
            </SitemapListHolder>
          )}
        </SitemapWrapper>
      );
    }
  }
  
  const SitemapButton = styled.div`
    cursor: pointer;
    padding: 8px;
    position: absolute;
    right: 0px;
    top: 8px;
    background: rgba(230, 230, 240, 0.4);
    color: #101014;
    font-weight: bold;
    font-size: 12px;
  `;
  const SitemapListHolder = styled.div`
    text-align: left;
    background: black;
    overflow-y: scroll;
    height: 100%;
  `;
  const SitemapList = styled.ul`
    list-style: none;
    padding: 0;
    madgin: 0;
  `;
  const SitemapListItem = styled.li`
    line-height: 12px;
    padding: 0;
    madgin: 0;
    a {
      color: white;
      padding: 0;
      madgin: 0;
      font-size: 12px;
    }
  `;
  
  const SitemapWrapper = styled.div`
    font-weight: regular;
    width: 100%;
    text-align: left;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 0;
    margin: 0;
    z-index: 8040;
  `;
  export default SiteMap;
  