1import { css } from '@emotion/react';
2import React from 'react';
3
4import { androidPermissions, AndroidPermission, PermissionReference } from './data';
5
6import Permalink from '~/components/Permalink';
7import { InlineCode } from '~/components/base/code';
8import { Quote } from '~/components/base/paragraph';
9import { Cell, HeaderCell, Row, Table, TableHead } from '~/ui/components/Table';
10
11// TODO(cedric): all commented code is related to the "granter" column.
12// This column defines if the permission is granted by the system or user (requires notification).
13// We have to clearly communicate what it means before showing it to the user.
14
15// import { QuestionIcon } from '~/components/icons/QuestionIcon';
16
17type AndroidPermissionsProps = {
18  permissions: PermissionReference<AndroidPermission>[];
19};
20
21// const grantedByInfo = 'Some permissions are granted by the system without user approval';
22
23export function AndroidPermissions({ permissions }: AndroidPermissionsProps) {
24  const list = React.useMemo(() => getPermissions(permissions), [permissions]);
25
26  return (
27    <Table>
28      <TableHead>
29        <Row>
30          <HeaderCell>Android Permission</HeaderCell>
31          {/* <HeaderCell>
32            <span css={grantedByInfoStyle} title={grantedByInfo}>
33              Granted by <QuestionIcon size={12} title={grantedByInfo} />
34            </span>
35          </HeaderCell> */}
36          <HeaderCell>Description</HeaderCell>
37        </Row>
38      </TableHead>
39      <tbody>
40        {list.map(permission => (
41          <AndroidPermissionRow key={permission.name} {...permission} />
42        ))}
43      </tbody>
44    </Table>
45  );
46}
47
48function AndroidPermissionRow({
49  name,
50  description,
51  explanation,
52  warning,
53  apiDeprecated,
54}: AndroidPermission) {
55  return (
56    <Row subtle={!!apiDeprecated}>
57      <Cell>
58        <Permalink id={`permission-${name.toLowerCase()}`}>
59          <span>
60            <InlineCode>{name}</InlineCode>
61          </span>
62        </Permalink>
63      </Cell>
64      {/* <Cell>
65        <i>{getPermissionGranter(permission)}</i>
66      </Cell> */}
67      <Cell>
68        {!!description && (
69          <p css={(warning || explanation) && descriptionSpaceStyle}>{description}</p>
70        )}
71        {!!warning && (
72          <Quote css={quoteStyle}>
73            <span>⚠️ {warning}</span>
74          </Quote>
75        )}
76        {explanation && !warning && (
77          <Quote css={quoteStyle}>
78            <span dangerouslySetInnerHTML={{ __html: explanation }} />
79          </Quote>
80        )}
81      </Cell>
82    </Row>
83  );
84}
85
86function getPermissions(permissions: AndroidPermissionsProps['permissions']) {
87  return permissions
88    .map(permission =>
89      typeof permission === 'string'
90        ? androidPermissions[permission]
91        : { ...androidPermissions[permission.name], ...permission }
92    )
93    .filter(Boolean);
94}
95
96// const grantedByInfoStyle = css`
97//   white-space: nowrap;
98// `;
99
100const descriptionSpaceStyle = css`
101  margin-bottom: 1rem;
102`;
103
104const quoteStyle = css`
105  margin-bottom: 0;
106`;
107
108// function getPermissionGranter(permission: AndroidPermission): 'user' | 'system' | 'none' {
109//   if (!permission.protection) return 'none';
110//   if (permission.protection.includes('dangerous')) return 'user';
111//   return 'system';
112// }
113