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 CheckIcon from "@mui/icons-material/Check";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import { history } from "@umijs/max";
import dayjs from "dayjs";
import { 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,
  remove,
  edit,
  copy,
  publish,
  authorized,
}) {
  const { courseName, picUrl, createTime, typeName, type } = product;
  const [confirm, setconfirm] = useState(false);
  const [shut, setshut] = useState(false);

  return (
    <Card sx={{ borderRadius: 3 }} className="hovered" id="jikl">
      <Box sx={{ pt: "66%", position: "relative" }} className="center">
        {typeName && (
          <Label
            variant="filled"
            color={
              (type === 1 && "warning") || (type === 3 && "default") || "info"
            }
            sx={{
              zIndex: 9,
              top: 20,
              left: 20,

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

        <Box
          className="actionhover"
          sx={{ borderRadius: 2, overflow: "hidden" }}
        >
          <Box className="masker"></Box>
          {type == 1 && (
            <Box className="edit">
              <Tooltip placement="bottom-start" title="编辑">
                <IconButton
                  onClick={() => {
                    edit(product);
                  }}
                >
                  <EditIcon
                    style={{ fontSize: 20, color: colors.blue[200] }}
                  ></EditIcon>
                </IconButton>
              </Tooltip>

              <Tooltip placement="bottom-start" title={confirm ? "确认删除" : "删除"}>
                {confirm ? (
                  <IconButton
                    disabled={confirm === "1"}
                    onClick={() => {
                      remove(product);
                    }}
                    sx={{ marginLeft: 2 }}
                  >
                    <CheckIcon
                      style={{
                        fontSize: 20,
                        color:
                          confirm === "1"
                            ? colors.grey[500]
                            : colors.green[500],
                      }}
                    ></CheckIcon>
                  </IconButton>
                ) : (
                  <IconButton
                    onClick={() => {
                      setconfirm("1");

                      setTimeout(() => {
                        setconfirm(true);
                      }, 200);

                      setTimeout(() => {
                        setconfirm(false);
                      }, 3000);
                    }}
                  >
                    <DeleteIcon
                      style={{ fontSize: 20, color: colors.red[500] }}
                    ></DeleteIcon>
                  </IconButton>
                )}
              </Tooltip>
            </Box>
          )}

          <Stack
            direction="row"
            alignItems="center"
            justifyContent="space-between"
            width={"100%"}
            className="stackani"
            padding={"0px 12px"}
          >
            <div></div>

            {type !== 3 && (
              <Tooltip placement="bottom-start" title={shut ? "确认结束" : "结束"}>
                {shut ? (
                  <IconButton
                    disabled={shut === "1"}
                    onClick={() => {
                      publish(product, { type: 3 });
                    }}
                  >
                    <CheckIcon
                      style={{
                        fontSize: 20,
                        color:
                          shut === "1" ? colors.grey[500] : colors.green[500],
                      }}
                    ></CheckIcon>
                  </IconButton>
                ) : (
                  <IconButton
                    onClick={() => {
                      setshut("1");

                      setTimeout(() => {
                        setshut(true);
                      }, 200);

                      setTimeout(() => {
                        setshut(false);
                      }, 3000);
                    }}
                  >
                    <IconFont
                      type="icon-guanbi"
                      style={{ fontSize: 20, color: "#ffffff" }}
                    ></IconFont>
                  </IconButton>
                )}
              </Tooltip>
            )}
          </Stack>
        </Box>
      </Box>

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

          <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"}
          alignItems={"center"}
        >
          <Stack direction={"row"} spacing={1}>
            {type == 3 ? (
              <div></div>
            ) : (
              <Tooltip placement="bottom-start" title={type == 1 ? "发布" : type == 2 ? "取消发布" : ""}>
                <IconButton
                  onClick={() => {
                    publish(product);
                  }}
                >
                  {type == 1 ? (
                    <IconFont
                      type="icon-fabu"
                      style={{ fontSize: 20, color: colors.blue[600] }}
                    ></IconFont>
                  ) : (
                    <IconFont
                      type="icon-undo"
                      style={{ fontSize: 20, color: colors.red[600] }}
                    ></IconFont>
                  )}
                </IconButton>
              </Tooltip>
            )}
            {type === 1 ? (
              <Tooltip placement="bottom-start" title="授权">
                <IconButton
                  onClick={() => {
                    authorized(product);
                  }}
                >
                  <IconFont
                    type="icon-shouquanguanli"
                    style={{ fontSize: 20, color: colors.blue[600] }}
                  ></IconFont>
                </IconButton>
              </Tooltip>
            ) : (
              <div></div>
            )}
          </Stack>

          <Stack direction={"row"} spacing={1}>
            {type === 1 && (
              <Tooltip placement="bottom-start" title="备课">
                <IconButton
                  onClick={() => {
                    history.push("/work/dolessons/" + product.id);
                  }}
                >
                  <IconFont
                    type="icon-beike"
                    style={{ fontSize: 20, color: "#333333" }}
                  ></IconFont>
                </IconButton>
              </Tooltip>
            )}

            <Tooltip placement="bottom-start" title="复制创建">
              <IconButton
                onClick={() => {
                  copy(product);
                }}
              >
                <IconFont
                  type="icon-fuzhi"
                  style={{ fontSize: 20, color: "#333" }}
                ></IconFont>
              </IconButton>
            </Tooltip>
          </Stack>
        </Stack>
      </Stack>
    </Card>
  );
}