import React, { useContext } from "react";
import {
  Grid,
  Card,
  CardContent,
  Button,
  Typography,
  Divider,
  Box,
} from "@mui/material";
import { useDispatch } from "react-redux";
import { AppContext } from "../../../../contexts/AppContext";
import { pspRemoveSession } from "../../services/psp-remove-session";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { formatJustDate } from "../../../../utils/formatTime";

export const PspSessions = ({ item, updateTable }) => {
  const dispatch = useDispatch();
  const [openNotif] = useContext(AppContext);

  return (
    <Grid container spacing={1}>
      {item?.guildPos?.map((item, i) => (
        <Grid item xs={12} key={i}>
          <Card
            sx={{
              borderRadius: 2,
              boxShadow: 1,
              padding: 1,
              background: i % 2 === 0 ? "white" : "#e4efee",
            }}
          >
            <CardContent sx={{ padding: 1 }}>
              <Typography
                variant="body2"
                sx={{ fontSize: "14px" }}
                color="textSecondary"
              >
                شناسه: {item?.posId}
              </Typography>
              <Typography
                variant="body2"
                sx={{ fontSize: "14px" }}
                color="textSecondary"
              >
                شماره ترمینال: {item?.terminalNumber}
              </Typography>
              {!!item?.posSessions?.length && (
                <>
                  <Divider sx={{ marginY: 1 }} />
                  <Typography
                    variant="body2"
                    color="primary"
                    sx={{ fontWeight: "bold", marginY: 1, fontSize: "12px" }}
                  >
                    نشست های فعال:
                  </Typography>
                </>
              )}
              {item?.posSessions?.map((option, index) => (
                <Box
                  key={index}
                  sx={{
                    marginTop: 1,
                    border: "1px solid #e0e0e0",
                    borderRadius: 1,
                    padding: 1.5,
                    backgroundColor: index % 2 === 0 ? "#eeeeee" : "#fdfdfd",
                  }}
                >
                  <Typography variant="body2" color="textSecondary">
                    {index + 1} - نام:
                    <Typography component="span" color="textPrimary">
                      {option?.name}
                    </Typography>
                  </Typography>

                  <Typography variant="body2" color="textSecondary">
                    سریال دستگاه :
                    <Typography component="span" color="textPrimary">
                      {option?.serial || "-"}
                    </Typography>
                  </Typography>
                  <Typography variant="body2" color="textSecondary">
                    تاریخ اولین ورود :
                    <Typography component="span" color="textPrimary">
                      {formatJustDate(option?.sessionCreateDate) || "-"}
                    </Typography>
                  </Typography>
                  <Typography variant="body2" color="textSecondary">
                    زمان آخرین بازدید :
                    <Typography component="span" color="textPrimary">
                      {formatJustDate(option?.sessionLastSeenDate) || "-"}
                    </Typography>
                  </Typography>
                  <Typography variant="body2" color="textSecondary">
                    کلمه عبور :
                    <Typography component="span" color="textPrimary">
                      {option?.password}
                    </Typography>
                  </Typography>
                  <Button
                    variant="outlined"
                    color="error"
                    size="small"
                    fullWidth
                    onClick={() => {
                      dispatch(pspRemoveSession(option?.key)).then((r) => {
                        if (r.payload.error) {
                          openNotif({
                            vertical: "top",
                            horizontal: "center",
                            msg: r.payload.error,
                            severity: "error",
                          });
                        } else {
                          dispatch(
                            DRAWER({
                              right: false,
                              bottom: false,
                              content: null,
                            })
                          );
                          updateTable();
                          openNotif({
                            vertical: "top",
                            horizontal: "center",
                            msg: "عملیات با موفقیت انجام شد.",
                            severity: "success",
                          });
                        }
                      });
                    }}
                  >
                    حذف نشست
                  </Button>
                </Box>
              ))}
            </CardContent>
          </Card>
        </Grid>
      ))}
    </Grid>
  );
};
