@material-ui/core#ListItemAvatar JavaScript Examples

SideBarCard = ({ user, onLanguageSelect, lang, langCode }) => {
  const classes = useStyles();
  //TODO: this could be done better
  const fields = {
    label: lang.t("note.lable"),
    notes: [
      lang.t("note.note1"),
      lang.t("note.note2"),
      lang.t("note.note3"),
      lang.t("note.note4"),
    ],
  };

  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography variant="h6" component="h2">
          {fields.label}
        </Typography>
        <List>
          {fields.notes.map((el, index) => {
            return (
              <ListItem key={index} disableGutters>
                <ListItemAvatar style={{ flexShrink: 1 }}>
                  <Avatar style={{ background: '#fff', margin: 0 }}>
                    <CheckIcon style={{ fill: 'green', width: 20 }}/>
                  </Avatar>
                </ListItemAvatar>
                <ListItemText className="sidebarText">{el}</ListItemText>
              </ListItem>
            );
          })}
        </List>
      </CardContent>
    </Card>
  );
}

ChatList = ({ chats, createChat }) => {
  const classes = useStyles();
  const [name, setName, setNameState] = useInput('');
  const handleAddChat = (event) => {
    event.preventDefault();
    createChat(name);
    setNameState('');
  }

  return (
    <List className={classes.root}>

      { chats.map(({id, name}) => {
          return (
            <Link key={id} to={`/chats/${id}`}>
              <ListItem className={classes.listItem}>
                <ListItemAvatar>
                  <Avatar />
                </ListItemAvatar>
                <ListItemText
                  primary={name}
                />
              </ListItem>
            </Link>
          )
        })
      }
      <ListItem className={classes.listItem}>
        <form onSubmit={handleAddChat}>
          <input type="text" placeholder="Chat name" value={name} onChange={setName} />
          <button>Create chat</button>
        </form>
      </ListItem>
    </List>
  )
}

export function ImageExportDialog (props) {
  const classes = useStyles()
  const { onClose, open } = props

  const handleClose = () => {
    onClose('')
  }

  const handleListItemClick = (value) => {
    onClose(value)
  }

  return (
    <Dialog onClose={handleClose} aria-labelledby="image-export-dialog-title" open={open}>
      <DialogTitle id="image-export-dialog-title">Select Image type</DialogTitle>
      <List>
        {ImgTypes.map((img) => (
          <ListItem button onClick={() => handleListItemClick(img)} key={img}>
            <ListItemAvatar>
              <Avatar className={classes.avatar}>
                {img.charAt(0).toUpperCase()}
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={img} />
          </ListItem>
        ))}
      </List>
      <DialogActions>
        <Button onClick={handleClose} color="primary" autoFocus>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  )
}

function GetIssues(props){
    const classes = useStyles();
    const {
    repo: [repo, setRepo]} = {repo: useState('GCBM.Visualisation_Tool'),...(props.state || {})};
    console.log({repo});
    const { loading, error, data } = useQuery(GET_LABELLED_ISSUES, {
      variables: { repo: repo},
    });
    //const { loading, error, data } = useQuery(GET_LABELLED_ISSUES, {variables: {state.name} ,});
    console.log(data);

    if (loading) return <p>Loading...</p>;
    console.log(error);
    if (error) return <p>Error :(</p>;

    return data.repository.issues.edges.map(({ node }) => (
      <div>
      <ListItem alignItems="flex-start">
        <ListItemAvatar>
          <Avatar alt={node.author.login} src={node.author.avatarUrl} />
        </ListItemAvatar>
        <ListItemLink href={node.url}>
        <ListItemText
          primary={node.title}
          secondary={
            <React.Fragment>
              <Typography
                component="span"
                variant="body2"
                className={classes.inline}
                color="textPrimary"
              >
                #{node.number}
              </Typography>
              " — " {node.createdAt}
            </React.Fragment>
          }
        />
        </ListItemLink>
      </ListItem>
      <Divider variant="inset" component="li" />
      </div>
    ));
  }

function CommentList({ requestId }) {
  const classes = useStyles();
  const firestore = useFirestore();

  const querySnapshot = useFirestoreCollection(
    firestore
      .collection(`${REQUESTS_COMMENTS_PUBLIC_COLLECTION}`)
      .where('requestId', '==', requestId)
      .orderBy('createdAt', 'asc'),
  );

  if (querySnapshot.empty) {
    return (
      <Box color="text.disabled">
        <Typography
          variant="body2"
          className={classes.noComments}
          data-test="no-comments">
          No public comments.
        </Typography>
      </Box>
    );
  }

  return (
    <List>
      {querySnapshot.docs.map(
        (docSnap) =>
          // When new comment is added locally, the createdAt can be the serverTimestamp() value.
          // So, we wait on rendering until any new snapshot has finished writing.
          !docSnap.metadata.hasPendingWrites && (
            <ListItem
              key={docSnap.id}
              divider
              alignItems="flex-start"
              data-test="public-comment">
              <ListItemAvatar>
                <Avatar>{docSnap.get('author.firstName').slice(0, 1)}</Avatar>
              </ListItemAvatar>
              <ListItemText
                disableTypography
                primary={
                  <Typography variant="subtitle2" data-test="comment-author">
                    {docSnap.get('author.firstName')} &ndash;{' '}
                    <Typography
                      variant="body2"
                      display="inline"
                      color="textSecondary">
                      {format(docSnap.get('createdAt').toDate(), 'p - PPPP')}
                    </Typography>
                  </Typography>
                }
                secondary={docSnap
                  .get('content')
                  .split('\n')
                  .map((content, key) => (
                    <Typography
                      variant="body1"
                      /* eslint-disable react/no-array-index-key */
                      key={key}
                      /* eslint-enable react/no-array-index-key */
                      gutterBottom
                      data-test="comment-content">
                      {content}
                    </Typography>
                  ))}
              />
            </ListItem>
          ),
      )}
    </List>
  );
}

Inbox = ({ threads, selected, handleListItemClick }) => {
  const { paper, searchInbox, list, listItem, listText, avatar } = useStyles();
  const [search, setSearch] = useState('');

  return (
    <Paper className={paper}>
      <List className={list}>
        {threads
          .filter((thread) => {
            if (search === '') {
              return thread;
            } else if (
              thread.userName.toLowerCase().includes(search.toLowerCase())
            ) {
              return thread;
            }
          })
          .map((thread, i) => (
            <ListItem
              key={`${thread.userName}-${i}`}
              alignItems="flex-start"
              className={listItem}
              selected={thread.userName === selected}
              onClick={() => handleListItemClick(thread.userName)}
            >
              <ListItemAvatar>
                {thread.messages[0].type === 'message' ? (
                  <Avatar src={thread.avatar} className={avatar}></Avatar>
                ) : thread.messages[0].type === 'announce' ? (
                  <Announcement color="inherit" />
                ) : (
                  <Ballot color="inherit" />
                )}
              </ListItemAvatar>
              {thread.messages[0].type === 'survey' ||
              thread.messages[0].type === 'announce' ? (
                <ListItemText
                  primary={thread.messages[0].subject}
                  secondary={
                    thread.messages[0].subject
                      ? thread.messages[0].composed_at.slice(0, 10)
                      : thread.userName
                  }
                  className={listText}
                />
              ) : (
                <ListItemText primary={thread.userName} className={listText} />
              )}
              <Typography>
                {timeAgoFormatDate(
                  new Date(
                    thread.messages[thread.messages.length - 1].composed_at
                  )
                )}
              </Typography>
            </ListItem>
          ))}
      </List>
      <SearchInbox className={searchInbox} setSearch={setSearch} />
    </Paper>
  );
}

function NotificationItem({ notification }) {
  const { avatar, title } = renderContent(notification);

  return (
    <ListItem
      button
      to="#"
      disableGutters
      component={RouterLink}
      sx={{
        py: 1.5,
        px: 2.5,
        mt: '1px',
        ...(notification.isUnRead && {
          bgcolor: 'action.selected'
        })
      }}
    >
      <ListItemAvatar>
        <Avatar sx={{ bgcolor: 'background.neutral' }}>{avatar}</Avatar>
      </ListItemAvatar>
      <ListItemText
        primary={title}
        secondary={
          <Typography
            variant="caption"
            sx={{
              mt: 0.5,
              display: 'flex',
              alignItems: 'center',
              color: 'text.disabled'
            }}
          >
            <Box component={Icon} icon={clockFill} sx={{ mr: 0.5, width: 16, height: 16 }} />
            {formatDistanceToNow(new Date(notification.createdAt))}
          </Typography>
        }
      />
    </ListItem>
  );
}

function ParticipantsList(props) {
	const classes = useStyles();
	const { users } = props;
	const [openList, setOpenList] = useState(false);

	const renderParticipants = () => {
		return Object.keys(users).map(elem => {
			const name = users[elem];
			return (
				<>
					<ListItem>
						<ListItemAvatar>
							<Avatar style={{ fontWeight: "bold" }}>
								{nameGenerator(name.split(" "))}
							</Avatar>
						</ListItemAvatar>
						<ListItemText
							style={{
								borderRadius: "10px",
								padding: "10px",
								color: "rgb(62 53 53)",
								border: "solid rgb(62 53 53) 1px",
								textAlign: "center",
								fontWeight: "bolder",
								wordWrap: "break-word",
								overflowWrap: "break-word",
								hyphens: "auto",
								WebkitHyphens: "auto",
							}}
							primary={name}
						/>
					</ListItem>
				</>
			);
		});
	};
	return (
		<div>
			<Button
				onClick={() => setOpenList(true)}
				variant="contained"
				color="primary"
				startIcon={<GroupIcon />}
				style={{
					fontFamily: "poppins",
					marginLeft: "15px",
					fontWeight: "600",
					color: "white",
				}}
			>
				Participants [ {Object.keys(users).length} ]
			</Button>
			<Drawer
				anchor={"right"}
				open={openList}
				onClose={() => setOpenList(false)}
			>
				<CloseSharpIcon
					style={{ padding: "5px", fontSize: "3em", cursor: "pointer" }}
					onClick={() => setOpenList(false)}
				/>
				<div
					className={classes.list}
					style={{
						display: "flex",
						flexDirection: "column",
						minHeight: "100%",
					}}
					role="presentation"
				>
					<List>{renderParticipants()}</List>
				</div>
			</Drawer>
		</div>
	);
}

ChatMessage = (props) => {
  return props.messages.map((data) => (
    <ListItem
      style={{
        flexDirection: `${
          localStorage.getItem("my_name") === data.name ? "row-reverse" : "row"
        }`,
      }}
    >
      <ListItemAvatar
        style={{
          padding: `${
            localStorage.getItem("my_name") === data.name ? "0.6rem" : "unset"
          }`,
        }}
      >
        <Avatar>{nameGenerator(data.name.split(" "))}</Avatar>
      </ListItemAvatar>
      <ListItemText
        style={{
          paddingTop: "5px",
          borderRadius: "15px",
          paddingLeft: "20px",
          paddingBottom: "10px",
          backgroundColor: `${
            localStorage.getItem("my_name") === data.name
              ? "#00b4d8"
              : "#f0f0f0"
          }`,
          color: `${
            localStorage.getItem("my_name") === data.name ? "#fff" : "#404040"
          }`,
        }}
        primary={
          <span
            style={{
              color: `${
                localStorage.getItem("my_name") === data.name
                  ? "#fff"
                  : "#404040"
              }`,
            }}
          >
            <em>{data.name}</em>
          </span>
        }
        secondary={
          <span
            style={{
              color: `${
                localStorage.getItem("my_name") === data.name
                  ? "#fff"
                  : "#404040"
              }`,
              wordWrap: "break-word",
              overflowWrap: "break-word",
              hyphens: "auto",
              WebkitHyphens: "auto",
            }}
          >
            {data.message}
          </span>
        }
      />
    </ListItem>
  ));
}

LatestProducts = () => {
  const classes = useStyles();
  const [products] = useState(data);

  return (
    <Card>
      <CardHeader
        subtitle={`${products.length} in total`}
        title="Latest Products"
      />
      <Divider />
      <List>
        {products.map((product, i) => (
          <ListItem
            divider={i < products.length - 1}
            key={product.id}
          >
            <ListItemAvatar>
              <img
                alt="Product"
                className={classes.image}
                src={product.imageUrl}
              />
            </ListItemAvatar>
            <ListItemText
              primary={product.name}
              secondary={`Updated ${product.updatedAt.fromNow()}`}
            />
            <IconButton
              edge="end"
              size="small"
            >
              <MoreVertIcon />
            </IconButton>
          </ListItem>
        ))}
      </List>
      <Divider />
      <Box
        display="flex"
        justifyContent="flex-end"
        p={2}
      >
        <Button
          color="primary"
          endIcon={<ArrowRightIcon />}
          size="small"
          variant="text"
        >
          View all
        </Button>
      </Box>
    </Card>
  );
}

// Vertical Navbar for user dashboard
export default function DashSidebar (props) {
  const classes = useStyles()
  const auth = useSelector(state => state.authReducer)
  const dispatch = useDispatch()
  // For Fetching Saved Schematics
  useEffect(() => {
    dispatch(fetchSchematics())
    dispatch(fetchOtherProjects())
    dispatch(fetchRole())
  }, [dispatch])

  return (
    <>
      <Hidden smDown>
        <div className={classes.toolbar} />
      </Hidden>
      <List>
        <ListItem
          alignItems="flex-start"
          component={RouterLink}
          to="/dashboard"
          style={{ marginTop: '15px' }}
          className={classes.sideItem}
          button
          divider
        >
          <ListItemAvatar>
            <Avatar className={classes.purple}>
              {auth.user.username.charAt(0).toUpperCase()}
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary={auth.user.username}
            secondary={
              <React.Fragment>
                <Typography
                  component="span"
                  variant="body2"
                  color="textSecondary"
                >
                  {auth.roles !== null && auth.roles.group.map((value, key) => (<h3 key={value}>{value}</h3>))}
                </Typography>
              </React.Fragment>
            }
          />
        </ListItem>

        <ListItem
          component={RouterLink}
          to="/dashboard/profile"
          className={classes.sideItem}
          button
          divider
        >
          <ListItemText primary='My Profile' />
        </ListItem>
        <ListItem
          component={RouterLink}
          to="/dashboard/schematics"
          className={classes.sideItem}
          button
        >
          <ListItemText primary='My Schematics' />
        </ListItem>
        <Divider />
        {auth.roles && auth.roles.e_sim_reviewer &&
          <ListItem
            component={RouterLink}
            to="/dashboard/review_projects"
            className={classes.sideItem}
            button
          >
            <ListItemText primary='Review Projects' />
          </ListItem>}

      </List>
    </>
  )
}

Notification = ({ notification, onNotificationClick }) => {
  const classes = useStyles();
  const token = useSelector(store => store.auth.token);
  const { t } = useTranslation();
  const st = dFormatter(JSON.parse('"' + notification.date + '"'));

  return (
    <Link to={notification.link} className={classes.notificationLink}>
      <ListItem
        alignItems="center"
        disableGutters
        button
        className={classes.notificationStyle}
        onClick={() => {
          if (!notification.viewed) {
            let obj = new API();
            obj.viewNotification({
              id: notification.id,
              token: token,
              body: notification,
            });
          }
          onNotificationClick();
        }}
      >
        <ListItemAvatar>
          {notification.sources.length === 1 && (
            <AvatarGroup className={classes.group}>
              <Avatar
                className={classes.image}
                src={notification.sources[0].avatar}
              />
            </AvatarGroup>
          )}
          {notification.sources.length > 1 && (
            <AvatarGroup className={classes.group}>
              <Avatar
                className={classes.firstImage}
                src={notification.sources[0].avatar}
              />
              <Avatar
                className={classes.secondImage}
                src={notification.sources[1].avatar}
              />
            </AvatarGroup>
          )}
        </ListItemAvatar>
        <ListItemText
          className={classes.text}
          classes={{ primary: classes.message, secondary: classes.time }}
          primary={
            <span
              dangerouslySetInnerHTML={{
                __html: notification.message,
              }}
            ></span>
          }
          secondary={st.value + ' ' + st.key + ' ' + 'ago'}
        />
        {!notification.viewed && <div className={classes.viewDot}></div>}
        {notification.viewed && <div className={classes.unviewed}></div>}
      </ListItem>
    </Link>
  );
}

export default function Comment(props) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid item xs={12}>
        <div className={classes.demo}>
          <List>
            {/* {generate( */}
            <ListItem>
              <ListItemAvatar>
                {props.username ? (
                  <Link to={`/user/${props.username}`}>
                    <Avatar className={classes.avatar}>
                      {props.name
                        ? props.name[0]
                        : // + props.name.split(" ")[1][0]
                          "X"}
                    </Avatar>
                  </Link>
                ) : (
                  <Avatar className={classes.avatar}>
                    {props.name
                      ? props.name[0]
                      : // + props.name.split(" ")[1][0]
                        "X"}
                  </Avatar>
                )}
              </ListItemAvatar>
              <ListItemText
                primary={props.comment}
                secondary={
                  <Moment format="MMM D" withTitle>
                    {props.date}
                  </Moment>
                }
              />
              <ListItemSecondaryAction>
                {/* <IconButton edge="end" aria-label="delete">
                  <DeleteIcon fontSize="small" />
                </IconButton> */}
              </ListItemSecondaryAction>
            </ListItem>
          </List>
        </div>
      </Grid>
    </div>
  );
}

function UserDetails(props: UserDetailsProps) {
  const [state, dispatch] = useReducer(dataFetchReducer, initialState);
  const classes = useStyles();

  const buttonClassname = clsx({
    [classes.buttonFailure]: state.isError,
    [classes.buttonSuccess]: !state.isError,
  });

  function requestUserDetails() {
    const permissionsList = [
      {
        name: CustomPermissionName.USER_NAME,
        description:
          'We would like to display your Username on your profile page.',
      },
      {
        name: CustomPermissionName.PROFILE_PHOTO,
        description:
          'We would like to display your Profile Photo on your profile page.',
      },
      {
        name: CustomPermissionName.CONTACT_LIST,
        description: 'We would like to send messages to your contacts.',
      },
    ];

    props
      .requestPermissions(permissionsList)
      .then((permissions) => filterAllowedPermissions(permissions))
      .then((permissions) =>
        Promise.all([
          hasPermission(CustomPermissionName.USER_NAME, permissions)
            ? props.getUserName()
            : null,
          hasPermission(CustomPermissionName.PROFILE_PHOTO, permissions)
            ? props.getProfilePhoto()
            : null,
          hasPermission(CustomPermissionName.CONTACT_LIST, permissions)
            ? props.getContacts()
            : null,
        ])
      )
      .then(() => dispatch({ type: 'FETCH_SUCCESS' }))
      .catch((e) => {
        console.error(e);
        dispatch({ type: 'FETCH_FAILURE' });
      });
  }

  function requestPoints() {
    const permissionsList = [
      {
        name: CustomPermissionName.POINTS,
        description:
          'We would like to display your Points on your profile page.',
      },
    ];

    props
      .requestPermissions(permissionsList)
      .then((permissions) => filterAllowedPermissions(permissions))
      .then((permissions) =>
        Promise.all([
          hasPermission(CustomPermissionName.POINTS, permissions)
            ? props.getPoints()
            : null,
        ])
      )
      .then(() => dispatch({ type: 'POINTS_FETCH_SUCCESS' }))
      .catch((e) => {
        console.error(e);
        dispatch({ type: 'POINTS_FETCH_FAILURE' });
      });
  }

  function filterAllowedPermissions(permissions) {
    return permissions
      .filter(
        (permission) => permission.status === CustomPermissionStatus.ALLOWED
      )
      .map((permission) => permission.name);
  }

  function handleClick(e) {
    if (!state.isLoading) {
      e.preventDefault();
      dispatch({ type: 'FETCH_INIT' });
      requestUserDetails();
    }
  }

  function handlePointsClick(e) {
    if (!state.isLoading) {
      e.preventDefault();
      dispatch({ type: 'POINTS_FETCH_INIT' });
      requestPoints();
    }
  }

  function ProfilePhoto() {
    const hasDeniedPermission =
      state.hasRequestedPermissions &&
      !hasPermission(CustomPermissionName.PROFILE_PHOTO);

    return [
      hasDeniedPermission ? (
        <ListItemText
          primary='"Profile Photo" permission not granted.'
          className={classes.red}
          key="avatar-error"
        />
      ) : null,
      <Avatar
        src={props.profilePhoto}
        className={classes.profilePhoto}
        key="avatar"
      />,
    ];
  }

  function UserDetails() {
    const hasDeniedPermission =
      state.hasRequestedPermissions &&
      !hasPermission(CustomPermissionName.USER_NAME);

    return (
      <Paper className={classes.paper}>
        <CardHeader subheader="User Details" />
        <TextField
          variant="outlined"
          disabled={true}
          className={classes.formInput}
          id="input-name"
          error={state.isError || hasDeniedPermission}
          label={'Name'}
          value={
            hasDeniedPermission
              ? '"User Name" permission not granted.'
              : props.userName || ' '
          }
        />
      </Paper>
    );
  }

  function ContactList() {
    const hasDeniedPermision =
      state.hasRequestedPermissions &&
      !hasPermission(CustomPermissionName.CONTACT_LIST);

    return (
      <Paper className={classes.paper}>
        <CardHeader subheader="Contact List" />
        <List className={classes.contactsList}>
          {hasDeniedPermision && (
            <ListItem>
              <ListItemText
                primary='"Contacts" permission not granted.'
                className={classes.red}
              />
            </ListItem>
          )}
          {!hasDeniedPermision &&
            props.contactList &&
            props.contactList.map((contact) => (
              <ListItem divider>
                <ListItemAvatar>
                  <Avatar className={classes.contactIcon} />
                </ListItemAvatar>
                <ListItemText
                  primary={contact.id}
                  secondary={
                    <React.Fragment>
                      <Typography>
                        {contact.name && contact.name !== '' && (
                          <span>{'Name: ' + contact.name}</span>
                        )}
                      </Typography>
                      <Typography>
                        {contact.email && contact.email !== '' && (
                          <span>{'Email: ' + contact.email}</span>
                        )}
                      </Typography>
                    </React.Fragment>
                  }
                />
              </ListItem>
            ))}
        </List>
      </Paper>
    );
  }

  function PointBalance() {
    const hasDeniedPermission =
      state.hasRequestedPointPermissions &&
      !hasPermission(CustomPermissionName.POINTS);

    return (
      <Paper className={classes.paper}>
        <CardHeader subheader="Points" />
        <TextField
          variant="outlined"
          disabled={true}
          className={classes.formInput}
          id="input-points-standard"
          error={state.isPointsError || hasDeniedPermission}
          label={'Points (Standard)'}
          value={
            hasDeniedPermission
              ? '"Points" permission not granted.'
              : props.points !== undefined &&
                props.points.standard !== undefined
              ? props.points.standard.toString()
              : '-'
          }
        />
        <TextField
          variant="outlined"
          disabled={true}
          className={classes.formInput}
          id="input-points-term"
          error={state.isPointsError || hasDeniedPermission}
          label={'Points (Time-Limited)'}
          value={
            hasDeniedPermission
              ? '"Points" permission not granted.'
              : props.points !== undefined && props.points.term !== undefined
              ? props.points.term.toString()
              : '-'
          }
        />
        <TextField
          variant="outlined"
          disabled={true}
          className={classes.formInput}
          id="input-points-cash"
          error={state.isPointsError || hasDeniedPermission}
          label={'Points (Rakuten Cash)'}
          value={
            hasDeniedPermission
              ? '"Points" permission not granted.'
              : props.points !== undefined && props.points.cash !== undefined
              ? props.points.cash.toString()
              : '-'
          }
        />
      </Paper>
    );
  }

  function CardActionsForm() {
    return (
      <FormGroup column="true" className={classes.rootUserGroup}>
        <div className={classes.wrapper}>
          <Button
            onClick={handleClick}
            variant="contained"
            color="primary"
            classes={{ root: classes.button }}
            className={buttonClassname}
            disabled={state.isLoading}
            data-testid="fetchUserButton"
          >
            Fetch User Details
          </Button>
          {state.isLoading && (
            <CircularProgress size={20} className={classes.buttonProgress} />
          )}
        </div>
        {state.isError && (
          <Typography variant="body1" className={classes.error}>
            Error fetching the User Details
          </Typography>
        )}
      </FormGroup>
    );
  }

  function CardPointActionsForm() {
    return (
      <FormGroup column="true" className={classes.rootUserGroup}>
        <div className={classes.wrapper}>
          <Button
            onClick={handlePointsClick}
            variant="contained"
            color="primary"
            classes={{ root: classes.button }}
            className={buttonClassname}
            disabled={state.isPointsLoading}
            data-testid="fetchPointsButton"
          >
            Fetch Points
          </Button>
          {state.isPointsLoading && (
            <CircularProgress size={20} className={classes.buttonProgress} />
          )}
        </div>
        {state.isPointsError && (
          <Typography variant="body1" className={classes.error}>
            Error fetching the points
          </Typography>
        )}
      </FormGroup>
    );
  }

  function hasPermission(permission, permissionList: ?(string[])) {
    permissionList = permissionList || props.permissions || [];
    return permissionList.indexOf(permission) > -1;
  }

  return (
    <div className={classes.scrollable}>
      <GreyCard className={classes.card}>
        <CardContent>
          <div
            className={classes.dataFormsWrapper}
            data-testid="dataFormsWrapper"
          >
            {ProfilePhoto()}
            {UserDetails()}
            {ContactList()}
          </div>
        </CardContent>
        <CardActions classes={{ root: classes.rootCardActions }}>
          {CardActionsForm()}
        </CardActions>

        <CardContent>
          <div
            className={classes.dataFormsWrapper}
            data-testid="pointDataFormsWrapper"
          >
            {PointBalance()}
          </div>
        </CardContent>
        <CardActions classes={{ root: classes.rootCardActions }}>
          {CardPointActionsForm()}
        </CardActions>
      </GreyCard>
    </div>
  );
}

WebChatListItem = ({ item, position, onItemClick }) => {
  const [userType, setUserType] = useState("");
  const classes = useStyles();

  let data = item.chat[0];

  useEffect(() => {
    setUserName();
  }, []);

  function setUserName() {
    let userType = getUserType(item);
    setUserType(userType);
  }

  return (
    <div style={{cursor:'pointer'}} onClick={() => onItemClick(item)}>
      {position > 0 && (
        <div
          light={true}
          className={classes.parentDiv}
        />
      )}
      <ListItem
        alignItems="flex-start"
        style={{
          display: "flex",
          flexDirection: "row",
          flex: 1,
          marginTop: "-1%"
        }}
      >
        <ListItemAvatar style={{ flex: 0.15, marginLeft: "-1%" }}>
          {/* <chatImage /> */}
          <Avatar alt="User" src={chatImage} className={classes.profileImage} />
        </ListItemAvatar>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            flex: 0.7
          }}
        >
          <ListItemText
            primary={
              <Typography className={classes.userName}>
                {userType == webConstants.FRIEND
                  ? data.userName
                  : data.chatName}
              </Typography>
            }
          />
          <ListItemText
            secondary={
              <Typography className={classes.userMessage}>
                {data.chatMessage}
              </Typography>
            }
          />
        </div>
        <ListItemText
          style={{
            display: "flex",
            flex: 0.15,
            justifyContent: "flex-end",
            alignItems: "flex-end",
            flexDirection: "column"
          }}
          primary={
            <Typography className={classes.userTime}>
              {getTimeInFormat(data.chatTime)}
            </Typography>
          }
          secondary={
            <Avatar className={item.chatUnreadCount != 0 ? classes.avatarStyle : classes.emptyAvatarStyle}>
              <Typography className={classes.textMsgCount}>
                {item.chatUnreadCount}
              </Typography>
            </Avatar>
          }
        />
      </ListItem>

      {/* <Card transparent style={{ elevation: 0, marginRight: -5 }}>
        <CardItem>
          <View style={{ marginLeft: -5 }}>
            <Thumbnail
              source={
                data.chatImage === ""
                  ? PROFILE
                  : { isStatic: true, uri: data.chatImage }
              }
            />
          </View>
          <Body
            style={{
              flexDirection: "column",
              marginLeft: 15
            }}
          >
            <Text
              numberOfLines={1}
              style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}
            >
              {userType == webConstants.FRIEND ? data.userName : data.chatName}
            </Text>

            <Text
              numberOfLines={2}
              style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}
            >
              {data.chatMessage}
            </Text>
          </Body>
          <View>
            <Text style={[DEFAULT_STYLES.poppinsSemiBold, styles.userTime]}>
              {getTimeInFormat(item.chatTime)}
            </Text>
            {data.chatUnreadCount === "" && (
              <View style={styles.textMsgCountView}>
                <Text
                  style={[DEFAULT_STYLES.poppinsSemiBold, styles.textMsgCount]}
                >
                  {data.chatUnreadCount}
                </Text>
              </View>
            )}
            {data.chatUnreadCount != "" && (
              <Icon
                style={styles.msgIcon}
                name={data.chatUnreadCount}
                type={data.chatUnreadCount}
              />
            )}
          </View>
        </CardItem>
      </Card> */}
    </div>
  );
}

OftadehAvatarMenu = props => {
  const classes = useStyles(props);

  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);

  const handleToggle = () => {
    setOpen(prevOpen => !prevOpen);
  };

  const handleClose = event => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
  };

  return (
    <>
      <ListItem
        button
        ref={anchorRef}
        aria-controls={open ? "menu-list-grow" : undefined}
        aria-haspopup="true"
        onClick={handleToggle}
        alignItems="flex-start"
        className={classes.paddingRightZero}
      >
        <ListItemAvatar>
          <OftadehAvatarBadge
            overlap="circle"
            anchorOrigin={{
              vertical: "bottom",
              horizontal: "right"
            }}
            variant="dot"
          >
            <Avatar
              alt="Mohammad Oftadeh"
              src="https://lh5.googleusercontent.com/-WqhFe4eMggE/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdFUa5CK9Wi6g5qd8ZUt6apKFYSwA/photo.jpg?sz=328"
            />
          </OftadehAvatarBadge>
        </ListItemAvatar>
        <Hidden implementation="css" smDown>
          <ListItemText
            primary={
              <React.Fragment>
                <Typography component="span" variant="subtitle2">
                  Mohammad Oftadeh
                </Typography>
              </React.Fragment>
            }
            secondary={
              <React.Fragment>
                <Typography
                  component="span"
                  variant="caption"
                  className={classes.inline}
                  color="textPrimary"
                >
                  Admin
                </Typography>
              </React.Fragment>
            }
          />
        </Hidden>
      </ListItem>
      <Popper
        open={open}
        anchorEl={anchorRef.current}
        role={undefined}
        transition
        disablePortal
      >
        {({ TransitionProps, placement }) => (
          <Grow
            {...TransitionProps}
            style={{
              transformOrigin:
                placement === "bottom" ? "center top" : "center bottom"
            }}
          >
            <Paper>
              <ClickAwayListener onClickAway={handleClose}>
                <MenuList autoFocusItem={open} id="menu-list-grow">
                  <MenuItem onClick={handleClose}>
                    <ListItemIcon className={classes.menuIcon}>
                      <AccountCircle fontSize="small" />
                    </ListItemIcon>
                    Profile
                  </MenuItem>
                  <MenuItem onClick={handleClose}>
                    <ListItemIcon className={classes.menuIcon}>
                      <Settings fontSize="small" />
                    </ListItemIcon>
                    settings
                  </MenuItem>
                  <MenuItem onClick={handleClose}>
                    <ListItemIcon className={classes.menuIcon}>
                      <ExitToApp fontSize="small" />
                    </ListItemIcon>
                    Logout
                  </MenuItem>
                </MenuList>
              </ClickAwayListener>
            </Paper>
          </Grow>
        )}
      </Popper>
    </>
  );
}

getMessage = (message, classes) => {
  switch (message.typeUrl) {
    case TransactionMessageData.Types.MSG_CLOSE_DEPLOYMENT:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <PowerOffIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Close Deployment"
            secondary={`Close deployment with dseq: ${message.value.id.dseq}`}
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_CREATE_CERTIFICATE:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <VerifiedUserIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText primary="Create Certificate" classes={{ primary: classes.listItemPrimaryText }} />
        </>
      );
    case TransactionMessageData.Types.MSG_CREATE_DEPLOYMENT:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <PublishIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Create Deployment"
            secondary={
              <>
                New deployment with dseq <strong>{message.value.id.dseq}</strong> and a deposit of <strong>{uaktToAKT(message.value.deposit.amount)}AKT</strong>
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_UPDATE_DEPLOYMENT:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <PublishIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Update Deployment"
            secondary={
              <>
                Update deployment with dseq <strong>{message.value.id.dseq}</strong>
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_DEPOSIT_DEPLOYMENT:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <AddBoxIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Deposit Deployment"
            secondary={
              <>
                Add funds of <strong>{uaktToAKT(message.value.amount.amount)}AKT</strong> to deployment with dseq <strong>{message.value.id.dseq}</strong>
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_CREATE_LEASE:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <ReceiptIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Create Lease"
            secondary={
              <>
                New Lease with provider <strong>{message.value.bid_id.provider}</strong>, dseq: <strong>{message.value.bid_id.dseq}</strong>, gseq:{" "}
                <strong>{message.value.bid_id.gseq}</strong>, oseq: <strong>{message.value.bid_id.oseq}</strong>.
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_REVOKE_CERTIFICATE:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <CancelIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText primary="Revoke Certificate" secondary={`Serial: ${message.value.id.serial}`} classes={{ primary: classes.listItemPrimaryText }} />
        </>
      );
    case TransactionMessageData.Types.MSG_SEND_TOKENS:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <SendIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Send"
            secondary={
              <>
                <strong>{message.value.toAddress}</strong> will receive <strong>{uaktToAKT(message.value.amount[0].amount, 6)}AKT</strong>
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );
    case TransactionMessageData.Types.MSG_GRANT:
      return (
        <>
          <ListItemAvatar>
            <Avatar classes={{ root: classes.avatarRoot }}>
              <AccountBalanceIcon classes={{ root: classes.avatarIcon }} />
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="Authorize Spend"
            secondary={
              <>
                <strong>{message.value.grantee}</strong> will be able to spend up to{" "}
                <strong>{uaktToAKT(message.value.grant.authorization.value.spend_limit.amount, 6)}AKT</strong> on your behalf. Expires:{" "}
                <FormattedDate value={new Date(message.value.grant.expiration.seconds * 1_000)} />
                &nbsp;
                <FormattedTime value={new Date(message.value.grant.expiration.seconds * 1_000)} />.
              </>
            }
            classes={{ primary: classes.listItemPrimaryText }}
          />
        </>
      );

    default:
      return null;
  }
}

Settings = () => {
  const { 
    schemaVersion, versionMd5, updateTime, geoPermission, 
    setGeoPermission, renewDb, resetUsageRecord
  } = useContext ( AppContext )
  const [ updating, setUpdating ] = useState(false)
  const [ showGeoPermissionDenied, setShowGeoPermissionDenied ] = useState(false)
  const [ isCopied, setIsCopied ] = useState(false)

  const { t, i18n } = useTranslation()
  const classes = useStyles()

  useEffect(() => {
    setUpdating(false)
  }, [updateTime])

  return (
    <Paper className={classes.root}>
      <List>
        <ListItem
          button
          onClick={() => {vibrate(1);setUpdating(true);renewDb()}}
        >
          <ListItemAvatar>
            <Avatar><BuildIcon /></Avatar>
          </ListItemAvatar>
          <ListItemText 
            primary={t("架構版本")+": "+schemaVersion+" - "+versionMd5.substr(0,6)} 
            secondary={t('更新時間') + ": " + (new Date(updateTime)).toLocaleString().slice(0,20).replace(',',' ')} 
          />
        </ListItem>
        <ListItem
          button
          onClick={() => {
            vibrate(1)
            if ( geoPermission === 'granted' ) {
              setGeoPermission('closed')
            } else {
              setGeoPermission('opening')
              navigator.geolocation.getCurrentPosition(position => {
                setGeoPermission('granted')
              }, () => {
                setGeoPermission('denied')
                setShowGeoPermissionDenied(true)
              })
            }
          }}
        >
          <ListItemAvatar>
            <Avatar>{geoPermission === 'granted' ? <LocationOnIcon /> : <LocationOffIcon />}</Avatar>
          </ListItemAvatar>
          <ListItemText 
            primary={t("地理位置定位功能")} 
            secondary={t(geoPermission === 'granted' ? '開啟' : ( geoPermission === 'opening' ? '開啟中...' : '關閉' )) } 
          />
        </ListItem>
        <ListItem
          button
          onClick={() => {vibrate(1);resetUsageRecord()}}
        >
          <ListItemAvatar>
            <Avatar><DeleteIcon /></Avatar>
          </ListItemAvatar>
          <ListItemText 
            primary={t("一鍵清空用戶記錄")} 
            secondary={t("包括鎖定和常用報時")}
          />
        </ListItem>
        <Divider />
        <ListItem
          button
          component='a'
          href={`https://github.com/chunlaw/hk-independent-bus-eta/`}
          target="_blank"
          onClick={() => {vibrate(1)}}
        >
          <ListItemAvatar>
            <Avatar><GitHubIcon /></Avatar>
          </ListItemAvatar>
          <ListItemText 
            primary={"Source Code"} 
            secondary={"GPL-3.0 License"} 
          />
        </ListItem>
        <ListItem>
          <ListItemAvatar>
            <Avatar><DataUsageIcon /></Avatar>
          </ListItemAvatar>
          <ListItemText 
            primary={t("交通資料來源")} 
            secondary={t('資料一線通') + "  https://data.gov.hk" } 
          />
        </ListItem>
        <Divider />
        <ListItem
          button
          component='a'
          href={`https://donate.612fund.hk/${i18n.language}/`}
          target="_blank"
          onClick={() => {vibrate(1)}}
        >
          <ListItemAvatar>
            <Avatar><MonetizationOnIcon /></Avatar>
          </ListItemAvatar>
          <ListItemText 
            primary={t("捐款支持")} 
            secondary={t('請捐款到 612 人道支援基金') } 
          />
        </ListItem>
        <ListItem
          button
          onClick={() => {
            vibrate(1)
            if ( navigator.clipboard ) {
              navigator.clipboard.writeText('https://hkbus.app/')
              .then(() => {
                setIsCopied(true)
              })
            }
          }}
        >
          <ListItemAvatar>
            <Avatar><ShareIcon /></Avatar>
          </ListItemAvatar>
          <ListItemText 
            primary={t("複製應用程式鏈結")} 
            secondary={t('經不同媒介分享給親友') } 
          />
        </ListItem>
        <ListItem
          button
          component='a'
          href={`https://t.me/hkbusapp`}
          target="_blank"
          onClick={() => {vibrate(1)}}
        >
          <ListItemAvatar>
            <Avatar><TelegramIcon /></Avatar>
          </ListItemAvatar>
          <ListItemText 
            primary={t("Telegram 交流區")} 
            secondary={t('歡迎意見及技術交流') } 
          />
        </ListItem>
      </List>
      <Snackbar
        anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}
        open={updating}
        message={t('資料更新中')+'...'}
      />
      <Snackbar
        anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}
        open={showGeoPermissionDenied}
        autoHideDuration={1500}
        onClose={(e, reason) => {
          setShowGeoPermissionDenied(false)
        }}
        message={t('無法獲得地理位置定位功能權限')}
      />
      <Snackbar
        anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}
        open={isCopied}
        autoHideDuration={1500}
        onClose={(event, reason) => {
          setIsCopied(false);
        }}
        message={t('鏈結已複製到剪貼簿')}
      />
    </Paper>
  )
}

function LikePanel({ postId, user }) {
  const classes = useStyles();

  const [like, setLike] = useState(false);
  const [usersLiked, setUsersLiked] = useState([]);
  const [likeCounter, setLikeCounter] = useState(0);
  const [likeModal, setLikeModal] = useState(false);

  const onLike = (e) => {
    e.preventDefault();
    if (user) {
      db.collection("posts")
        .doc(postId)
        .collection("likes")
        .doc(user.uid)
        .set({
          username: user.displayName,
          photoURL: user.photoURL,
        })
        .then(() => {
          setLike(true);
          setLikeCounter(likeCounter + 1);
        })
        .catch((err) => console.log(err));
    }
  };

  const onDislike = (e) => {
    e.preventDefault();
    if (user) {
      db.collection("posts")
        .doc(postId)
        .collection("likes")
        .doc(user.uid)
        .delete()
        .then(() => {
          setLike(false);
          setLikeCounter(likeCounter - 1);
        })
        .catch((err) => console.log(err));
    }
  };

  // Getting Post's like data and updating like state
  useEffect(() => {
    db.collection("posts")
      .doc(postId)
      .collection("likes")
      .onSnapshot((snap) => {
        let documents = [];
        snap.forEach((doc) => {
          documents.push({
            userName: doc.data().username,
            photoURL: doc.data().photoURL,
            userId: doc.id,
          });
        });
        setUsersLiked(documents);
        setLikeCounter(documents.length);
        if (user) {
          documents.map((u) => {
            if (u.userId === user.uid) {
              setLike(true);
            }
          });
        }
      });
  }, []);

  return (
    <>
      <div className={classes.likeContainer}>
        <Button>
          {like ? (
            <FavoriteIcon onClick={onDislike} />
          ) : (
            <FavoriteBorderIcon onClick={onLike} />
          )}
        </Button>

        {likeCounter ? (
          <Typography>
            Liked by{" "}
            <b
              className={classes.likeCounter}
              onClick={() => setLikeModal(true)}
            >
              {likeCounter} {likeCounter > 1 ? " users." : " user."}
            </b>
          </Typography>
        ) : null}
      </div>

      <Modal
        className={classes.modal}
        open={likeModal}
        onClose={() => setLikeModal(false)}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={likeModal}>
          <div className={classes.paper}>
            <h2>Users Liked:</h2>
            <Divider />
            <List className={classes.likelist}>
              {usersLiked.map((user) => (
                <ListItem button key={user.userId}>
                  <ListItemAvatar>
                    <Avatar
                      className={classes.avatar}
                      alt={user.userName}
                      src={user?.photoURL}
                    />
                  </ListItemAvatar>
                  <ListItemText primary={user.userName} />
                </ListItem>
              ))}
            </List>
          </div>
        </Fade>
      </Modal>
    </>
  );
}

MyList = (props) => {
  const classes = useStyles();
  const { breedName, setBreedName, setValue } = props;
  const [breeds, setBreeds] = useState(undefined);
  const [searchValue, setSearchValue] = useState();

  const [expandedPanel, setExpandedPanel] = useState(false);

  const handleAccordionChange = (key) => (event, isExpanded) => {
    setExpandedPanel(isExpanded ? key : false);
  };

  const handleChange = (event) => {
    let value = event.target.value.toLowerCase();
    setSearchValue(value);
  };

  useEffect(() => {
    axios.get("https://dog.ceo/api/breeds/list/all").then((response) => {
      console.log(response.data.message);
      setBreeds(response.data.message);
    });
  }, [searchValue]);

  return (
    <>
    <Scroll showBelow={250} />
      <Grid container justify="flex-end">
        <Grid item xs="12" md="4">
          <AutoSearchComplete
            searchValue={searchValue}
            setSearchValue={setSearchValue}
            breeds={breeds}
            handleChange={(e) => handleChange(e)}
          />
        </Grid>
      </Grid>
      {breeds ? (
        Object.keys(breeds)
          .filter((key) =>
            searchValue !== "" && searchValue !== undefined
              ? key === searchValue
              : "null"
          )
          .map((key, i) => {
            return (
              <Accordion
                key={i}
                style={{ margin: "1rem" }}
                onClick={() => {
                  setBreedName(key);
                }}
                expanded={expandedPanel === key}
                onChange={handleAccordionChange(key)}
              >
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls="panel1a-content"
                  id="key"
                >
                  <Typography
                    style={{ textTransform: "capitalize" }}
                    className={
                      breedName === key
                        ? classes.Accordion_a
                        : classes.Accordion
                    }
                  >
                    {key}
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <List>
                    {breeds[key].length === 0 ? (
                      <Typography>No Sub-Breads</Typography>
                    ) : (
                      breeds[key].map((breed) => (
                        <ListItem>
                          <ListItemAvatar>
                            <Avatar>
                              <Pets />
                            </Avatar>
                          </ListItemAvatar>
                          <ListItemText primary={breed} />
                        </ListItem>
                      ))
                    )}
                  </List>
                </AccordionDetails>
                <Divider />
                <Box p={2}>
                  <Button
                    variant="contained"
                    color="secondary"
                    onClick={() => setValue(1)}
                  >
                    Select
                  </Button>
                </Box>
              </Accordion>
            );
          })
      ) : (
        <Grid
          container
          direction="row"
          justify="center"
          alignItems="center"
          style={{ height: "60vh" }}
        >
          <Grid item>
            <CircularProgress color="secondary" size="4rem" />
          </Grid>
        </Grid>
      )}
    </>
  );
}

GrowerDetail = ({ open, growerId, onClose }) => {
  // console.log('render: grower detail');
  const classes = useStyle();
  const appContext = useContext(AppContext);
  const { growers } = useContext(GrowerContext);
  const { sendMessageFromGrower } = useContext(MessagingContext);
  const [growerRegistrations, setGrowerRegistrations] = useState(null);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [grower, setGrower] = useState({});
  const [deviceIdentifiers, setDeviceIdentifiers] = useState([]);
  const [snackbarOpen, setSnackbarOpen] = useState(false);
  const [snackbarLabel, setSnackbarLabel] = useState('');
  const [verificationStatus, setVerificationStatus] = useState({});
  const [loading, setLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);

  useEffect(() => {
    setErrorMessage(null);
    async function loadGrowerDetail() {
      if (grower && grower.growerAccountUuid !== growerId) {
        setGrower({});
        setDeviceIdentifiers([]);
      }
      if (growerId) {
        let match;
        if (isNaN(Number(growerId))) {
          match = await getGrower({
            id: undefined,
            growerAccountUuid: growerId,
          });
        } else {
          match = await getGrower({
            id: growerId,
            growerAccountUuid: undefined,
          });
        }

        if (match.error) {
          setErrorMessage(match.message);
        }

        setGrower(match);

        if (
          match.id &&
          (!growerRegistrations ||
            (growerRegistrations.length > 0 &&
              growerRegistrations[0].planter_id !== match.id))
        ) {
          setGrowerRegistrations(null);
          api.getGrowerRegistrations(match.id).then((registrations) => {
            if (registrations && registrations.length) {
              const sortedReg = registrations.sort((a, b) =>
                a.created_at > b.created_at ? 1 : -1
              );
              const uniqueDevices = {};
              const devices = sortedReg.reduce((result, reg) => {
                if (!reg.device_identifier) {
                  return result;
                }
                if (!uniqueDevices[reg.device_identifier]) {
                  uniqueDevices[reg.device_identifier] = true;
                  // if manufacturer isn't 'apple' it's an android phone
                  result.push({
                    id: reg.device_identifier,
                    os:
                      reg.manufacturer?.toLowerCase() === 'apple'
                        ? 'iOS'
                        : 'Android',
                  });
                }
                return result;
              }, []);

              setDeviceIdentifiers(devices);
              setGrowerRegistrations(sortedReg);
            }
          });
        }
      }
    }
    loadGrowerDetail();
    // eslint-disable-next-line
  }, [growerId, growers]);

  useEffect(() => {
    async function loadCaptures() {
      if (grower.id) {
        setLoading(true);
        const [
          approvedCount,
          awaitingCount,
          rejectedCount,
        ] = await Promise.all([
          getCaptureCountGrower(true, true, grower.id),
          getCaptureCountGrower(true, false, grower.id),
          getCaptureCountGrower(false, false, grower.id),
        ]);
        setVerificationStatus({
          approved: approvedCount,
          awaiting: awaitingCount,
          rejected: rejectedCount,
        });
        setLoading(false);
      }
    }
    loadCaptures();
  }, [grower]);

  async function getCaptureCountGrower(active, approved, growerId) {
    let filter = new FilterModel();
    filter.planterId = growerId?.toString();
    filter.active = active;
    filter.approved = approved;
    const countResponse = await treeTrackerApi.getCaptureCount(filter);
    return countResponse && countResponse.count ? countResponse.count : 0;
  }

  async function getGrower(payload) {
    const { id, growerAccountUuid } = payload;
    let grower = growers?.find(
      (p) =>
        (growerAccountUuid && p.growerAccountUuid === growerAccountUuid) ||
        p.id === id
    ); // Look for a match in the context first

    if (!grower && !id) {
      const filter = new FilterGrower();
      filter.growerAccountUuid = growerAccountUuid;
      [grower] = await api.getGrowers({ filter }); // Otherwise query the API
    }

    if (!grower && !growerAccountUuid) {
      grower = await api.getGrower(id);
    }
    // throw error if no match at all
    return grower || { error: true, message: 'Sorry! No grower info found' };
  }

  function handleEditClick() {
    setEditDialogOpen(true);
  }

  function handleEditClose() {
    setEditDialogOpen(false);
    setSnackbarOpen(false);
    setSnackbarLabel('');
  }

  function confirmCopy(label) {
    setSnackbarOpen(false);
    setSnackbarLabel(label);
    setSnackbarOpen(true);
  }

  return (
    <>
      <Drawer anchor="right" open={open} onClose={onClose}>
        <Grid
          style={{
            width: GROWER_IMAGE_SIZE,
          }}
        >
          {errorMessage ? (
            <Grid container direction="column">
              <Grid item>
                <Grid container justify="space-between" alignItems="center">
                  <Grid item>
                    <Box m={4}>
                      <Typography color="primary" variant="h6">
                        Grower Detail
                      </Typography>
                      <Typography variant="h4">{errorMessage}</Typography>
                    </Box>
                  </Grid>
                  <Grid item>
                    <IconButton onClick={() => onClose()}>
                      <Close />
                    </IconButton>
                  </Grid>
                </Grid>
              </Grid>
              <Grid item className={classes.imageContainer}>
                <CardMedia className={classes.cardMedia}>
                  <Grid container className={classes.personBox}>
                    <Person className={classes.person} />
                  </Grid>
                </CardMedia>
              </Grid>
            </Grid>
          ) : (
            <Grid container direction="column">
              <Grid item>
                <Grid container justify="space-between" alignItems="center">
                  <Grid item>
                    <Box m={4}>
                      <Typography color="primary" variant="h6">
                        Grower Detail
                      </Typography>
                    </Box>
                  </Grid>
                  <Grid item>
                    <IconButton onClick={() => onClose()}>
                      <Close />
                    </IconButton>
                  </Grid>
                </Grid>
              </Grid>
              <Grid item className={classes.imageContainer}>
                {grower?.imageUrl && (
                  <OptimizedImage
                    src={grower.imageUrl}
                    width={GROWER_IMAGE_SIZE}
                    height={GROWER_IMAGE_SIZE}
                    className={classes.cardMedia}
                    fixed
                    rotation={grower.imageRotation}
                    alertTitleSize="1.6rem"
                    alertTextSize="1rem"
                    alertHeight="50%"
                  />
                )}
                {!grower.imageUrl && (
                  <CardMedia className={classes.cardMedia}>
                    <Grid container className={classes.personBox}>
                      <Person className={classes.person} />
                    </Grid>
                  </CardMedia>
                )}
                {hasPermission(appContext.user, [
                  POLICIES.SUPER_PERMISSION,
                  POLICIES.MANAGE_GROWER,
                ]) && (
                  <Fab
                    data-testid="edit-grower"
                    className={classes.editButton}
                    onClick={() => handleEditClick()}
                  >
                    <EditIcon />
                  </Fab>
                )}
              </Grid>
              <Grid item className={classes.box}>
                <Typography
                  variant="h5"
                  color="primary"
                  className={classes.name}
                >
                  {grower.firstName} {grower.lastName}
                </Typography>
                <Typography variant="body2">
                  ID: <LinkToWebmap value={grower.id} type="user" />
                </Typography>
              </Grid>
              {process.env.REACT_APP_ENABLE_MESSAGING === 'true' &&
                hasPermission(appContext.user, [POLICIES.SUPER_PERMISSION]) && (
                  <Grid item>
                    <Button
                      className={classes.messageButton}
                      onClick={() => sendMessageFromGrower(grower)}
                      component={Link}
                      to={'/messaging'}
                    >
                      Send Message
                    </Button>
                  </Grid>
                )}
              <Divider />
              <Grid container direction="column" className={classes.box}>
                <Typography variant="subtitle1">Captures</Typography>
                {loading ? (
                  <LinearProgress color="primary" />
                ) : (
                  <List className={classes.listCaptures}>
                    <Box
                      borderColor="grey.300"
                      borderRadius={10}
                      border={0.5}
                      m={0.5}
                    >
                      <ListItem>
                        <ListItemAvatar>
                          <Avatar className={classes.approvedChip}>
                            <Done />
                          </Avatar>
                        </ListItemAvatar>
                        <ListItemText
                          primary={
                            <Typography variant="h5">
                              {verificationStatus.approved || 0}
                            </Typography>
                          }
                          secondary="Approved"
                        />
                      </ListItem>
                    </Box>
                    <Box
                      borderColor="grey.300"
                      borderRadius={10}
                      border={0.5}
                      m={0.5}
                    >
                      <ListItem>
                        <ListItemAvatar>
                          <Avatar className={classes.awaitingChip}>
                            <HourglassEmptyOutlined />
                          </Avatar>
                        </ListItemAvatar>
                        <ListItemText
                          primary={
                            <Typography variant="h5">
                              {verificationStatus.awaiting || 0}
                            </Typography>
                          }
                          secondary="Awaiting"
                        />
                      </ListItem>
                    </Box>
                    <Box
                      borderColor="grey.300"
                      borderRadius={10}
                      border={0.5}
                      m={0.5}
                    >
                      <ListItem>
                        <ListItemAvatar>
                          <Avatar className={classes.rejectedChip}>
                            <Clear />
                          </Avatar>
                        </ListItemAvatar>
                        <ListItemText
                          primary={
                            <Typography variant="h5">
                              {verificationStatus.rejected || 0}
                            </Typography>
                          }
                          secondary="Rejected"
                        />
                      </ListItem>
                    </Box>
                  </List>
                )}
              </Grid>
              <Divider />
              <Grid container direction="column" className={classes.box}>
                <Typography variant="subtitle1">Email address</Typography>
                <Typography variant="body1">{grower.email || '---'}</Typography>
              </Grid>
              <Divider />
              <Grid container direction="column" className={classes.box}>
                <Typography variant="subtitle1">Phone number</Typography>
                <Typography variant="body1">{grower.phone || '---'}</Typography>
              </Grid>
              <Divider />
              <Grid container direction="column" className={classes.box}>
                <Typography variant="subtitle1">Person ID</Typography>
                <Typography variant="body1">
                  {grower.personId || '---'}
                </Typography>
              </Grid>
              <Divider />
              <Grid container direction="column" className={classes.box}>
                <Typography variant="subtitle1">Organization</Typography>
                {grower.organization || grower.organizationId ? (
                  <GrowerOrganization
                    organizationName={grower.organization}
                    assignedOrganizationId={grower.organizationId}
                  />
                ) : (
                  <Typography variant="body1">---</Typography>
                )}
              </Grid>
              <Divider />
              <Grid container direction="column" className={classes.box}>
                <Typography variant="subtitle1">Country</Typography>
                <Typography variant="body1">
                  {(growerRegistrations &&
                    growerRegistrations
                      .map((item) => item.country)
                      .filter(
                        (country, i, arr) =>
                          country && arr.indexOf(country) === i
                      )
                      .join(', ')) ||
                    '---'}
                </Typography>
              </Grid>
              <Divider />
              <Grid container direction="column" className={classes.box}>
                <Typography variant="subtitle1">Registered</Typography>
                <Typography variant="body1">
                  {(growerRegistrations &&
                    growerRegistrations.length > 0 &&
                    getDateTimeStringLocale(
                      growerRegistrations[0].created_at
                    )) ||
                    '---'}
                </Typography>
              </Grid>
              <Divider />
              <Grid container direction="column" className={classes.box}>
                <Typography variant="subtitle1">
                  Device Identifier{deviceIdentifiers.length >= 2 ? 's' : ''}
                </Typography>
                {(deviceIdentifiers.length && (
                  <table>
                    <tbody>
                      {deviceIdentifiers.map((device, i) => (
                        <tr key={i}>
                          <td>
                            <Typography variant="body1">
                              {device.id}
                              <CopyButton
                                label={'Device Identifier'}
                                value={device.id}
                                confirmCopy={confirmCopy}
                              />
                            </Typography>
                          </td>
                          <td>
                            <Typography variant="body1">
                              ({device.os})
                            </Typography>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )) || <Typography variant="body1">---</Typography>}
              </Grid>
            </Grid>
          )}
        </Grid>
      </Drawer>
      <CopyNotification
        snackbarLabel={snackbarLabel}
        snackbarOpen={snackbarOpen}
        setSnackbarOpen={setSnackbarOpen}
      />
      <EditGrower
        isOpen={editDialogOpen}
        grower={grower}
        onClose={handleEditClose}
      ></EditGrower>
    </>
  );
}

function CommentList({ requestId }) {
  const classes = useStyles();
  const firestore = useFirestore();
  const [retries, setRetries] = useState(0);
  const { showError } = useNotifications();

  // This is used to trigger the snapshot subscription after confirming that the user
  // has permission to access the contact info.
  const [query, setQuery] = useState(null);
  const [commentDocs, setCommentDocs] = useState([]);

  // Because of timing issues, this component will likely get run before the server has applied
  // the requested document access resulting in almost a guranteed permission-denied error. So,
  // we use this effect to monitor for permission-denied until the change has propagated, at which
  // point, we do the actual doc subscription (next useEffect);
  useEffect(() => {
    async function getData() {
      try {
        const dataQuery = firestore
          .collection(`${REQUESTS_DISCUSSIONS_COLLECTION}`)
          .where('requestId', '==', requestId)
          .orderBy('createdAt', 'asc');
        // Call it once because this will throw the permission exception.
        await dataQuery.get();
        setQuery(dataQuery); // Setting this will trigger the subscription useEffect.
      } catch (err) {
        // We only try reloading if insufficient permissions.
        if (err.code !== 'permission-denied') {
          throw err;
        }
        if (retries >= 25) {
          // setAccessFailed(true);
          showError(
            'Failed to get contact info access, please try again later.',
          );
        } else {
          window.setTimeout(() => {
            setRetries(retries + 1);
          }, 1000);
        }
      }
    }
    getData();
  }, [retries, firestore, requestId, showError]);

  // Once the previous useEffect verifies that the user has access then this one does the actual
  // document subscription.
  useEffect(() => {
    if (!query) return undefined;
    const unsub = query.onSnapshot((querySnap) => {
      setCommentDocs(querySnap.docs);
    });
    return unsub;
  }, [query]);

  // const querySnapshot = useFirestoreCollection(
  //   firestore
  //     .collection(`${REQUESTS_DISCUSSIONS_COLLECTION}`)
  //     .where('requestId', '==', requestId)
  //     .orderBy('createdAt', 'asc'),
  // );

  if (!commentDocs.length) {
    return (
      <Box color="text.disabled">
        <Typography
          variant="body2"
          className={classes.noComments}
          data-test="no-comments">
          No comments yet.
        </Typography>
        <Divider className={classes.divider} />
      </Box>
    );
  }

  return (
    <List>
      {commentDocs.map(
        (docSnap) =>
          // When new comment is added locally, the createdAt can be the serverTimestamp() value.
          // So, we wait on rendering until any new snapshot has finished writing.
          !docSnap.metadata.hasPendingWrites && (
            <ListItem
              key={docSnap.id}
              divider
              alignItems="flex-start"
              data-test="private-comment">
              <ListItemAvatar>
                <Avatar>{docSnap.get('author.firstName').slice(0, 1)}</Avatar>
              </ListItemAvatar>
              <ListItemText
                disableTypography
                primary={
                  <Typography variant="subtitle2">
                    {docSnap.get('author.firstName')} &ndash;{' '}
                    <Typography
                      variant="body2"
                      display="inline"
                      color="textSecondary">
                      {format(docSnap.get('createdAt').toDate(), 'p - PPPP')}
                    </Typography>{' '}
                    {docSnap.get('kind') !== 1 && (
                      <Chip
                        variant="outlined"
                        size="small"
                        icon={kindMap[docSnap.get('kind')].icon}
                        label={kindMap[docSnap.get('kind')].shortDescription}
                      />
                    )}
                  </Typography>
                }
                secondary={docSnap
                  .get('content')
                  .split('\n')
                  .map((content, key) => (
                    // eslint-disable-next-line react/no-array-index-key
                    <Typography variant="body1" key={key} gutterBottom>
                      {content}
                    </Typography>
                  ))}
              />
            </ListItem>
          ),
      )}
    </List>
  );
}

export function TemplateGallery(props) {
  const [selectedCategoryTitle, setSelectedCategoryTitle] = useState(null);
  const [searchTerms, setSearchTerms] = useState("");
  const [searchTermsUsed, setSearchTermsUsed] = useState(null);
  const { isLoading, categories, templates } = useTemplates();
  const query = useQueryParams();
  const history = useHistory();
  const selectedCategory = selectedCategoryTitle && categories.find((x) => x.title === selectedCategoryTitle);
  const classes = useStyles();
  const searchTermsSplit = searchTermsUsed?.split().map((x) => x.toLowerCase());
  const searchResults =
    searchTermsSplit && templates.filter((x) => searchTermsSplit.some((s) => x.name.toLowerCase().includes(s) || x.readme.toLowerCase().includes(s)));

  useEffect(() => {
    const queryCategory = query.get("category");
    const querySearch = query.get("search");

    if (queryCategory) {
      setSelectedCategoryTitle(queryCategory);
    }

    if (querySearch) {
      setSearchTerms(querySearch);
      setSearchTermsUsed(querySearch);
    }

    return () => {
      clearTimeout(timeoutId);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    const queryCategory = query.get("category");
    if (categories?.length > 0 && !queryCategory) {
      setSelectedCategoryTitle(categories[0].title);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [categories]);

  const onSearchChange = (event) => {
    const searchValue = event.target.value;
    setSearchTerms(searchValue);

    if (searchValue) {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        setSearchTermsUsed(searchValue);

        history.replace(UrlService.templates(selectedCategoryTitle, searchValue));
      }, 300);
    } else {
      setSearchTermsUsed(searchValue);
      history.replace(UrlService.templates(selectedCategoryTitle, searchValue));
    }
  };

  const onCategoryClick = (categoryTitle) => {
    setSelectedCategoryTitle(categoryTitle);
    history.replace(UrlService.templates(categoryTitle, searchTerms));
  };

  const onClearSearch = () => {
    setSearchTerms("");
    setSearchTermsUsed("");
  };

  return (
    <>
      <Helmet title="Template Gallery" />

      <LinearLoadingSkeleton isLoading={isLoading} />

      <Box padding="1rem">
        <Typography variant="h3" className={classes.title}>
          Template Gallery
        </Typography>

        <Box paddingTop={2}>
          These templates come from the{" "}
          <a href="https://github.com/ovrclk/awesome-akash" target="_blank" rel="noreferrer">
            Awesome Akash
          </a>{" "}
          repository.
        </Box>

        <TextField
          fullWidth
          label="Search"
          disabled={isLoading}
          value={searchTerms}
          onChange={onSearchChange}
          InputProps={{
            endAdornment: searchTerms && (
              <IconButton onClick={onClearSearch} size="small">
                <CloseIcon fontSize="small" />
              </IconButton>
            )
          }}
        />
      </Box>

      {searchTermsUsed || searchTerms ? (
        <ViewPanel bottomElementId="footer" overflow="auto" className={classes.templateList}>
          <List className={classes.templateList}>
            {searchResults?.map((template) => (
              <ListItem button key={template.id} component={Link} to={UrlService.templateDetails(template.id)}>
                <ListItemAvatar>
                  {template.logoUrl ? (
                    <Avatar src={template.logoUrl} variant="square" />
                  ) : (
                    <div className={classes.logoPlaceholder}>
                      <ImageIcon />
                    </div>
                  )}
                </ListItemAvatar>
                <ListItemText
                  primary={
                    <>
                      {template.name} - <strong>{template.category}</strong>
                    </>
                  }
                  secondary={template.summary}
                />
              </ListItem>
            ))}
          </List>
        </ViewPanel>
      ) : (
        <>
          <Box className={classes.gallery}>
            <ViewPanel bottomElementId="footer" overflow="auto" className={classes.categoryList}>
              <List>
                {categories
                  .sort((a, b) => (a.title < b.title ? -1 : 1))
                  .map((category) => (
                    <ListItem button key={category.title} onClick={() => onCategoryClick(category.title)} selected={category.title === selectedCategoryTitle}>
                      <ListItemText primary={`${category.title} (${category.templates.length})`} />
                    </ListItem>
                  ))}
              </List>
            </ViewPanel>

            {selectedCategory && selectedCategory.templates && (
              <ViewPanel bottomElementId="footer" overflow="auto" className={classes.templateList}>
                <List>
                  {selectedCategory.templates.map((template) => (
                    <ListItem button key={template.id} component={Link} to={UrlService.templateDetails(template.id)}>
                      <ListItemAvatar>
                        {template.logoUrl ? (
                          <Avatar src={template.logoUrl} variant="square" />
                        ) : (
                          <div className={classes.logoPlaceholder}>
                            <ImageIcon />
                          </div>
                        )}
                      </ListItemAvatar>
                      <ListItemText primary={template.name} secondary={template.summary} />
                    </ListItem>
                  ))}
                </List>
              </ViewPanel>
            )}
          </Box>
        </>
      )}
    </>
  );
}

export function TemplateList(props) {
  const classes = useStyles();
  const history = useHistory();
  const { setSelectedTemplate } = props;

  function handleGithubOpen(value) {
    window.electron.openUrl(value.githubUrl);
  }

  function selectTemplate(template) {
    setSelectedTemplate(template);
    history.push("/createDeployment/editManifest");
  }

  async function fromFile() {
    const fileDef = await window.electron.openTemplateFromFile();

    if (fileDef) {
      setSelectedTemplate({
        title: "From file",
        code: "from-file",
        category: "General",
        description: fileDef.path,
        content: fileDef.content
      });
      history.push("/createDeployment/editManifest");
    }
  }

  function fromGallery() {
    history.push(UrlService.templates());
  }

  return (
    <>
      <Helmet title="Create Deployment - Template List" />

      <Box padding="1rem">
        <Typography variant="h5"><strong>What do you want to deploy?</strong></Typography>
      </Box>

      <List className={classes.root}>
        <ListItem dense button onClick={() => selectTemplate(emptyTemplate)}>
          <ListItemAvatar>
            <div className={classes.logoItem}>
              <InsertDriveFileIcon />
            </div>
          </ListItemAvatar>
          <ListItemText primary={emptyTemplate.title} secondary={emptyTemplate.description} />
          {emptyTemplate.githubUrl && (
            <ListItemSecondaryAction>
              <IconButton edge="end" aria-label="github" onClick={() => handleGithubOpen(emptyTemplate)}>
                <GitHubIcon />
              </IconButton>
            </ListItemSecondaryAction>
          )}
        </ListItem>
        <ListItem dense button onClick={() => selectTemplate(helloWorldTemplate)}>
          <ListItemAvatar>
            <div className={classes.logoItem}>
              <CloudIcon />
            </div>
          </ListItemAvatar>
          <ListItemText primary={helloWorldTemplate.title} secondary={helloWorldTemplate.description} />
          {helloWorldTemplate.githubUrl && (
            <ListItemSecondaryAction>
              <IconButton edge="end" aria-label="github" onClick={() => handleGithubOpen(helloWorldTemplate)}>
                <GitHubIcon />
              </IconButton>
            </ListItemSecondaryAction>
          )}
        </ListItem>
        <ListItem dense button onClick={() => fromFile()}>
          <ListItemAvatar>
            <div className={classes.logoItem}>
              <DescriptionIcon />
            </div>
          </ListItemAvatar>
          <ListItemText primary="From a file" secondary="Load a deploy.yml file from the computer." />
        </ListItem>
        <ListItem dense button onClick={() => fromGallery()}>
          <ListItemAvatar>
            <div className={classes.logoItem}>
              <CollectionsIcon />
            </div>
          </ListItemAvatar>
          <ListItemText primary="Browse template gallery" secondary="Explore the template gallery for a great variety of pre-made template by the community." />
        </ListItem>
      </List>
    </>
  );
}