import React from "react";

import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";

import Avatar from "@mui/material/Avatar";
import Card from "@mui/material/Card";
import CardHeader from "@mui/material/CardHeader";
import CardContent from "@mui/material/CardContent";
import CardActions from "@mui/material/CardActions";

import { Button } from "@material-ui/core";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";

import CancelIcon from "@material-ui/icons/Cancel";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";

const CardUser = ({ classes, usersOnlineInfo, logout }) => {
  const [search, setSearch] = React.useState("");

  const [filterStatus, setFilterStatus] = React.useState(null);

  const handleFilterChange = (event) => {
    setFilterStatus(event.target.value);
  };
  const handlesearch = (event) => {
    setSearch(event.target.value.toLowerCase());
  };

  return (
    <Grid item xs={12}>
      <Paper className={classes.cardPaperFix} sx={12} variant="outlined">
        <Grid container sx={12} justifyContent="space-between" alignItems="baseline">
          <Grid item sx={4}>
            <Typography
              component="h4"
              variant="h6"
              color="primary"
              style={{ marginBottom: "16px" }}
            >
              Lista de Usuários
            </Typography>
          </Grid>
          <Grid item sx={8} width="100%">
            <Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}>
              <TextField
                id="outlined-basic"
                label="Usuário"
                variant="standard"
                value={search}
                onChange={handlesearch}
              />
              <FormControl fullWidth variant="standard">
                <InputLabel id="status">Status</InputLabel>
                <Select
                  labelId="status"
                  id="status"
                  value={filterStatus}
                  label="Status"
                  onChange={handleFilterChange}
                >
                  <MenuItem value={null}>Todos</MenuItem>
                  <MenuItem value={"online"}>Online</MenuItem>
                  <MenuItem value={"offline"}>Offline</MenuItem>
                  <MenuItem value={"not"}>Não entrou</MenuItem>
                </Select>
              </FormControl>
            </Box>
          </Grid>
        </Grid>

        <Grid container spacing={3}>
          {usersOnlineInfo &&
            usersOnlineInfo
              .filter((e) => {
                if (filterStatus === null) return e;
                if (filterStatus === "not") return !e.statusOnline;
                return e.statusOnline && e.statusOnline.status === filterStatus;
              })
              .filter((e) => {
                return e.name.toLowerCase().includes(search);
              })
              .sort((a) => {
                if (a.statusOnline) {
                  if (a.statusOnline.status === "online") {
                    return -1;
                  }
                  return 0;
                }
                return 0;
              })
              .map((user, index) => (
                <Grid
                  item
                  xs={12}
                  sm={6}
                  md={6}
                  lg={3}
                  key={index}
                  style={{ position: "relative" }}
                >
                  <Card variant="outlined">
                    <CardHeader
                      avatar={
                        <Avatar
                          style={{
                            backgroundColor: user.statusOnline
                              ? user.statusOnline.status === "online"
                                ? "green"
                                : user.statusOnline.status === "offline"
                                ? "red"
                                : "black"
                              : "grey",
                          }}
                        >
                          {user.statusOnline ? (
                            user.statusOnline.status === "online" ? (
                              <CheckCircleIcon style={{ color: "white" }} />
                            ) : user.statusOnline.status === "offline" ? (
                              <CancelIcon style={{ color: "white" }} />
                            ) : (
                              <ErrorIcon style={{ color: "yellow" }} />
                            )
                          ) : (
                            <RemoveCircleIcon style={{ color: "black" }} />
                          )}
                        </Avatar>
                      }
                      title={
                        <Typography variant="h5" component="div">
                          {user.name}
                        </Typography>
                      }
                    />

                    <CardContent>
                      <Typography variant="h6" component="h1" color="textPrimary">
                        Em atendimento:
                        <Typography component="p" color="textPrimary" paragraph>
                          {user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0}
                        </Typography>
                      </Typography>

                      <Typography variant="h6" component="h1" color="textPrimary">
                        Finalizado:
                        <Typography component="p" color="textPrimary" paragraph>
                          {user.sumClosed && user.sumClosed.count ? user.sumClosed.count : 0}
                        </Typography>
                      </Typography>

                      <Typography variant="h6" component="h1" color="textPrimary">
                        Tempo online:
                        <Typography component="p" color="textPrimary" paragraph>
                          {user.sumOnlineTime && user.sumOnlineTime.sum
                            ? user.sumOnlineTime.sum
                            : "Não entrou Hoje"}
                        </Typography>
                      </Typography>
                    </CardContent>
                    <CardActions>
                      {user.statusOnline &&
                        user.statusOnline.status === "online" &&
                        user.statusOnline && (
                          <Button
                            className={classes.logginBtn}
                            variant="contained"
                            color="primary"
                            onClick={(e) => {
                                logout(user.id);
                            }}
                          >
                            {"Deslogar"}
                          </Button>
                        )}
                    </CardActions>
                  </Card>
                </Grid>
              ))}
        </Grid>
      </Paper>
    </Grid>
  );
};

export default CardUser;