1import * as React from 'react'
2import * as Kb from '../../../common-adapters'
3import * as Styles from '../../../styles'
4import {Props} from './participant-rekey.types'
5
6const Row = (props: {username: string; onUsernameClicked: (s: string) => void}) => (
7  <Kb.Box style={styles.row} onClick={() => props.onUsernameClicked(props.username)}>
8    <Kb.Avatar
9      username={props.username}
10      size={48}
11      style={{marginRight: Styles.globalMargins.small, padding: 4}}
12    />
13    <Kb.Box style={styles.innerRow}>
14      <Kb.ConnectedUsernames inline={true} type="BodyBold" usernames={props.username} />
15      <Kb.Text type="BodySmall" style={Styles.platformStyles({isElectron: {lineHeight: '17px'}})}>
16        Can rekey this chat by opening the Keybase app.
17      </Kb.Text>
18    </Kb.Box>
19  </Kb.Box>
20)
21
22const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) => {
23  return (
24    <Kb.Box style={styles.container}>
25      <Kb.Box
26        style={{
27          ...Styles.globalStyles.flexBoxRow,
28          backgroundColor: Styles.globalColors.red,
29          justifyContent: 'center',
30        }}
31      >
32        <Kb.Text
33          negative={true}
34          style={{paddingBottom: 8, paddingLeft: 24, paddingRight: 24, paddingTop: 8}}
35          type="BodySemibold"
36        >
37          This conversation is waiting for a participant to open their Keybase app.
38        </Kb.Text>
39      </Kb.Box>
40      <Kb.Box
41        style={{
42          ...Styles.globalStyles.flexBoxColumn,
43          flex: 1,
44          justifyContent: 'center',
45          marginLeft: 8,
46          overflow: 'auto',
47        }}
48      >
49        <Kb.Box>
50          {rekeyers.map(username => (
51            <Row key={username} username={username} onUsernameClicked={onUsernameClicked} />
52          ))}
53        </Kb.Box>
54      </Kb.Box>
55    </Kb.Box>
56  )
57}
58
59const styles = Styles.styleSheetCreate(
60  () =>
61    ({
62      container: Styles.platformStyles({
63        isElectron: {
64          ...Styles.globalStyles.flexBoxColumn,
65          alignItems: 'stretch',
66          backgroundColor: Styles.globalColors.white,
67          borderLeft: `1px solid ${Styles.globalColors.black_20}`,
68          flex: 1,
69          justifyContent: 'flex-start',
70        },
71      }),
72      innerRow: Styles.platformStyles({
73        isElectron: {
74          ...Styles.globalStyles.flexBoxColumn,
75          borderBottom: `1px solid ${Styles.globalColors.black_10}`,
76          flex: 1,
77          justifyContent: 'center',
78        },
79      }),
80      row: Styles.platformStyles({
81        isElectron: {
82          ...Styles.globalStyles.flexBoxRow,
83          ...Styles.desktopStyles.clickable,
84          minHeight: 48,
85        },
86      }),
87    } as const)
88)
89
90export default ParticipantRekey
91