<commit_before>/**
 * @providesModule CommunityChooser
 * @flow
 */

import React from 'react'
import { connect } from 'react-redux'
import styled from 'styled-components'

import type { State, Community } from 'redux/state'

type OwnProps = { rounded: boolean }
function mapStateToProps ({ caseData }: State, { rounded }: OwnProps) {
  const { reader } = caseData
  return {
    rounded,
    activeCommunity: reader && reader.enrollment && reader.activeCommunity,
  }
}

type Props = { activeCommunity: ?Community, rounded: boolean }
export const UnconnectedCommunityChooser = ({
  activeCommunity,
  rounded,
}: Props) =>
  <Bar empty={!activeCommunity} rounded={rounded}>
    {activeCommunity &&
      <CommunityName>
        {activeCommunity.name}
      </CommunityName>}
  </Bar>

export default connect(mapStateToProps)(UnconnectedCommunityChooser)

const Bar = styled.div`
  background-color: #373566;
  font-size: 10pt;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  padding: ${({ empty }) => (empty ? '0' : '5px')};
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: ${({ empty }) => (empty ? '#6acb72' : '#8764ea')};
  border-radius: ${({ rounded }) => (rounded ? '0 0 2pt 2pt' : '0')};
`

const CommunityName = styled.span`
  font-weight: bold;
  color: #d4c5ff;
  display: inline-block;
`<commit_msg>Builds the UI for switching between community fora<commit_after>/**
 * @providesModule CommunityChooser
 * @flow
 */

import React from 'react'
import { connect } from 'react-redux'
import styled from 'styled-components'

import { Popover, Menu, MenuItem, Position } from '@blueprintjs/core'

import { acceptKeyboardClick } from 'shared/keyboard'

import type { State, Community } from 'redux/state'

type OwnProps = { rounded: boolean }
function mapStateToProps ({ caseData }: State, { rounded }: OwnProps) {
  const { reader } = caseData
  return {
    rounded,
    activeCommunity: reader && reader.enrollment && reader.activeCommunity,
  }
}

type Props = { activeCommunity: ?Community, rounded: boolean }
export const UnconnectedCommunityChooser = ({
  activeCommunity,
  rounded,
}: Props) =>
  <Bar empty={!activeCommunity} rounded={rounded}>
    {activeCommunity &&
      <Popover
        position={rounded ? Position.BOTTOM_LEFT : Position.BOTTOM}
        content={
          <CommunityMenu>
            <li className="pt-menu-header">
              <h6>Choose a community</h6>
            </li>
            <Instructions>
              You’ll see the discussion taking place in the community you
              choose.
            </Instructions>

            <MenuItem
              iconName="globe"
              className="pt-active pt-intent-primary"
              text="Global Community"
              onClick={() => {}}
              onKeyPress={acceptKeyboardClick}
            />
            <MenuItem
              iconName="social-media"
              text="Invited Community"
              onClick={() => {}}
              onKeyPress={acceptKeyboardClick}
            />
          </CommunityMenu>
        }
      >
        <CommunityName onClick={acceptKeyboardClick}>
          <span>{activeCommunity.name}</span> ▾
        </CommunityName>
      </Popover>}
  </Bar>

export default connect(mapStateToProps)(UnconnectedCommunityChooser)

const Bar = styled.div`
  background-color: #373566;
  font-size: 10pt;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  padding: ${({ empty }) => (empty ? '0' : '5px')};
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: ${({ empty }) => (empty ? '#6acb72' : '#8764ea')};
  border-radius: ${({ rounded }) => (rounded ? '0 0 2pt 2pt' : '0')};
`

const CommunityMenu = styled(Menu)`
  width: 16em;
`

const Instructions = styled.li`
  margin: 5px;
  padding-left: 2px;
  font-style: italic;
  line-height: 1.2;
`

const CommunityName = styled.a.attrs({
  tabIndex: '0',
  href: '#',
})`
  font-weight: bold;
  color: #d4c5ff !important;
  display: inline-block;

  &:focus,
  &:hover {
    outline: none;
    color: white !important;

    & > span {
      text-decoration: underline;
    }
  }
`
{'fraction_non_alphanumeric': 0.14051578693661124, 'fraction_numerical': 0.016630513376717282, 'mean_word_length': 2.933649289099526, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 36, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5385642', 'n_tokens_mistral': 1356, 'n_tokens_neox': 1291, 'n_words': 307}