import PropTypes from "prop-types";
// @mui
import {
  Box,
  Card,
  colors,
  IconButton,
  Stack,
  Tooltip,
  Typography,
} from "@mui/material";
import { styled } from "@mui/material/styles";
// utils
// components
import IconFont from "@/components/IconFont";
import Label from "@/components/label";
import difftime from "@/utils/difftime";
import AccessTimeFilledIcon from "@mui/icons-material/AccessTimeFilled";
import { history, useModel } from "@umijs/max";
import { message } from "antd";
import dayjs from "dayjs";
import { useEffect, useState } from "react";

// ----------------------------------------------------------------------

const StyledProductImg = styled("img")({
  top: 0,
  width: "92%",
  height: "92%",
  marginTop: "4%",
  objectFit: "cover",
  position: "absolute",
});

ShopProductCard.propTypes = {
  product: PropTypes.object,
};

export default function ShopProductCard({ product }) {
  const {
    trainName,
    picUrl,
    createTime,
    typeName,
    type,
    deadline,
    sectionNum,
    experimentNum,
    startTime,
    unReadMsgCount,
    trainId,
  } = product;
  const [confirm, setconfirm] = useState(false);
  const [Numcount, setNumcount] = useState({});

  const [shut, setshut] = useState(false);
  const {
    initialState: { menuNum },
    setInitialState,
  } = useModel("@@initialState");

  let { STUDY_TRAIN_LIST } = menuNum ?? {};

  useEffect(() => {
    if (!STUDY_TRAIN_LIST) {
      return;
    }
    setNumcount((s) => ({
      ...s,
      [STUDY_TRAIN_LIST.id]: STUDY_TRAIN_LIST?.unReadMsgCount,
    }));
  }, [STUDY_TRAIN_LIST]);

  let num = Numcount?.[trainId] ?? unReadMsgCount;

  return (
    <Card sx={{ borderRadius: 3 }} className="hovered" id="jikl">
      <div
        style={{
          width: 24,
          height: 24,
          backgroundColor: "#ff4800",
          position: "absolute",
          right: 6,
          top: 6,
          zIndex: 999,
          borderRadius: 30,
          color: "#fff",
          fontSize: 12,
          display: !num ? "none" : "flex",
        }}
        className="center"
      >
        {num > 100 ? "99+" : num}
      </div>
      <Box sx={{ pt: "66%", position: "relative" }} className="center">
        {typeName && (
          <Label
            variant="filled"
            color={
              (type === 1 && "warning") ||
              (type === 2 && "info") ||
              (type === 3 && "default") ||
              "error"
            }
            sx={{
              zIndex: 9,
              top: 20,
              left: 20,

              position: "absolute",
              textTransform: "uppercase",
            }}
          >
            {typeName}
          </Label>
        )}
        <StyledProductImg
          alt={trainName}
          src={picUrl ?? DEFAULT_404_IMG}
          sx={{ borderRadius: 2 }}
        />
      </Box>

      <Stack spacing={1} sx={{ p: 2 }}>
        <Stack
          direction={"row"}
          justifyContent={"space-between"}
          width={"100%"}
          overflow={"hidden"}
          alignItems={"center"}
        >
          <div className="center">
            <Tooltip placement="bottom-start" title={trainName}>
              <Typography
                variant="subtitle2"
                noWrap
                sx={{
                  paddingLeft: 0,
                }}
              >
                {trainName}
              </Typography>
            </Tooltip>
          </div>

          <Box width={60} textAlign={"right"} flexShrink={0}>
            <Tooltip placement="bottom-start" title={createTime}>
              <Typography
                component="span"
                variant="body2"
                sx={{
                  color: "text.disabled",
                }}
              >
                {difftime(dayjs(), dayjs(createTime))}
              </Typography>
            </Tooltip>
          </Box>
        </Stack>

        <Stack
          direction={"row"}
          justifyContent={"space-between"}
          width={"100%"}
          overflow={"hidden"}
          alignItems={"center"}
        >
          <Stack direction={"row"} alignItems={"center"}>
            <AccessTimeFilledIcon
              sx={{ color: colors.grey[800], fontSize: 20 }}
            />
            <Typography
              component="span"
              variant="body2"
              sx={{
                paddingLeft: 1,
              }}
            >
              {startTime ?? "-"}~{deadline}
            </Typography>
          </Stack>
        </Stack>

        <Stack
          direction={"row"}
          justifyContent={"space-between"}
          alignItems={"center"}
          padding={"0 2px"}
        >
          <Stack direction={"row"} spacing={2} alignItems={"center"}>
            <Stack
              direction={"row"}
              alignItems={"center"}
              sx={{ cursor: "pointer" }}
            >
              <IconFont
                type="icon-beike"
                style={{ fontSize: 16, opacity: 0.6 }}
              ></IconFont>

              <Typography
                component="span"
                variant="body2"
                sx={{
                  color: "text.disabled",
                  paddingLeft: 1.2,
                  fontSize: 12,
                  margin: 0,
                }}
              >
                {sectionNum}课时/{experimentNum}实验
              </Typography>
            </Stack>
          </Stack>

          <Stack
            direction={"row"}
            spacing={0}
            flex={1}
            justifyContent={"flex-end"}
          >
            <Tooltip placement="bottom-start" title={"开始学习"}>
              <IconButton
                onClick={() => {
                  if (product.type === 3) {
                    message.warning("该课程已暂停，不能再开始学习");
                    return;
                  } else if (product.type === 4) {
                    message.warning("该课程已结束，不能再开始学习");
                    return;
                  }
                  history.push("/work/domybustrain/" + product.id);
                }}
              >
                <IconFont
                  type="icon-w_xuexi"
                  style={{ fontSize: 26, color: colors.blue[600] }}
                ></IconFont>
              </IconButton>
            </Tooltip>

            <Tooltip placement="bottom-start" title={"成绩"}>
              <IconButton
                disabled={shut === "1"}
                sx={{ flexShrink: 0 }}
                onClick={() => {
                  history.push("/work/myrebustrain/" + product.id);
                }}
              >
                <div style={{ width: 26, height: 26 }} className="center">
                  <IconFont
                    type="icon-chengjidan-copy"
                    style={{
                      fontSize: 20,
                      color: "#000",
                    }}
                  ></IconFont>
                </div>
              </IconButton>
            </Tooltip>
          </Stack>
        </Stack>
      </Stack>
    </Card>
  );
}
