1import * as React from 'react'
2import * as Kb from '../../common-adapters'
3import * as Styles from '../../styles'
4import * as Types from '../../constants/types/teams'
5import * as Container from '../../util/container'
6import * as Constants from '../../constants/teams'
7import * as TeamsGen from '../../actions/teams-gen'
8
9type Props = {title: string; teamID: Types.TeamID}
10
11const activityToIcon: {[key in 'active' | 'recently']: Kb.IconType} = {
12  active: 'iconfont-campfire-burning',
13  recently: 'iconfont-campfire-out',
14}
15const activityToLabel = {
16  active: 'Active',
17  recently: 'Recently active',
18}
19const Activity = ({level, style}: {level: Types.ActivityLevel; style?: Styles.StylesCrossPlatform}) =>
20  level === 'none' ? null : (
21    <Kb.Box2 direction="horizontal" gap="xtiny" alignItems="center" fullWidth={Styles.isMobile} style={style}>
22      <Kb.Icon
23        type={activityToIcon[level]}
24        color={level === 'active' ? Styles.globalColors.greenDark : Styles.globalColors.black_50}
25        sizeType="Small"
26      />
27      <Kb.Text type="BodySmall" style={level === 'active' ? styles.activityActive : undefined}>
28        {activityToLabel[level]}
29      </Kb.Text>
30    </Kb.Box2>
31  )
32
33export const ModalTitle = ({title, teamID}: Props) => {
34  const teamname = Container.useSelector(state => Constants.getTeamMeta(state, teamID).teamname)
35  const avatarFilepath = Container.useSelector(state => state.teams.newTeamWizard.avatarFilename)
36  const avatarCrop = Container.useSelector(state => state.teams.newTeamWizard.avatarCrop)
37  const isNewTeamWizard = teamID == Types.newTeamWizardTeamID
38
39  return Styles.isMobile ? (
40    <Kb.Box2 direction="vertical" alignItems="center">
41      {!!teamname && (
42        <Kb.Text type="BodyTiny" lineClamp={1} ellipsizeMode="middle">
43          {teamname}
44        </Kb.Text>
45      )}
46      <Kb.Text type="BodyBig">{title}</Kb.Text>
47    </Kb.Box2>
48  ) : (
49    <Kb.Box2 direction="vertical" gap="xtiny" alignItems="center" style={styles.title}>
50      <Kb.Avatar
51        size={32}
52        teamname={teamname === 'New team' ? '' : teamname}
53        style={styles.avatar}
54        isTeam={true}
55        imageOverrideUrl={isNewTeamWizard ? avatarFilepath : undefined}
56        crop={isNewTeamWizard ? avatarCrop : undefined}
57      />
58      <Kb.Box2 direction="vertical" alignItems="center">
59        <Kb.Text type="BodySmall" lineClamp={1}>
60          {teamname}
61        </Kb.Text>
62        <Kb.Text type="Header">{title}</Kb.Text>
63      </Kb.Box2>
64    </Kb.Box2>
65  )
66}
67
68/**
69 * Ensure activity levels are loaded
70 * @param forceLoad force a reload even if they're already loaded.
71 */
72export const useActivityLevels = (forceLoad?: boolean) => {
73  const dispatch = Container.useDispatch()
74  const activityLevelsLoaded = Container.useSelector(s => s.teams.activityLevels.loaded)
75  // keep whether we've triggered a load so we only do it once.
76  const triggeredLoad = React.useRef(false)
77  React.useEffect(() => {
78    if ((!activityLevelsLoaded || forceLoad) && !triggeredLoad.current) {
79      dispatch(TeamsGen.createGetActivityForTeams())
80      triggeredLoad.current = true
81    }
82  }, [dispatch, activityLevelsLoaded, forceLoad])
83}
84
85const styles = Styles.styleSheetCreate(() => ({
86  activityActive: {
87    color: Styles.globalColors.greenDark,
88  },
89  avatar: Styles.platformStyles({
90    isElectron: {
91      height: 16,
92      position: 'relative',
93      top: -16,
94    },
95  }),
96  title: {
97    paddingBottom: Styles.globalMargins.tiny,
98  },
99}))
100
101export default Activity
102