import {
  Box,
  FormControl,
  IconButton,
  MenuItem,
  TextField as MuiTextField,
  Paper,
  Select,
  SelectChangeEvent,
  TextFieldProps,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useDomainDefine } from "@utils/hooks/useDomainDefine";
import { FC, useState } from "react";
import ArrowDown from "@/assets/icons/ArrowDownIcon";
import CopyIcon from "@/assets/icons/CopyIcon";
import LinkIcon from "@/assets/icons/LinkIcon";

const TextField = MuiTextField as unknown as FC<TextFieldProps>;

export default function QuizLinkCard() {
  const theme = useTheme();
  const quiz = useCurrentQuiz();
  const { isTestServer } = useDomainDefine();
  const [display, setDisplay] = useState("1");
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  const CopyLink = () => {
    let one = (document.getElementById("inputLinkone") as HTMLInputElement)
      ?.value;
    let text = (document.getElementById("inputLink") as HTMLInputElement)
      ?.value;
    navigator.clipboard.writeText(one + text);
  };

  const handleChange = (event: SelectChangeEvent) => {
    setDisplay(event.target.value);
  };

  if (!quiz) return null;

  return (
    <Paper
      sx={{
        maxWidth: "522px",
        width: "100%",
        padding: "20px",
        borderRadius: "12px",
        display: "flex",
        flexDirection: "column",
        gap: "30px",
        boxShadow:
          "0px 100px 309px rgba(210, 208, 225, 0.24), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)",
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: isMobile ? "flex-start" : "center",
          gap: "10px",
          flexDirection: isMobile ? "column" : "row",
        }}
      >
        <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
          <LinkIcon
            color={theme.palette.brightPurple.main}
            bgcolor={"#EEE4FC"}
          />
          <Typography>Ссылка на quiz</Typography>
        </Box>
        <FormControl
          fullWidth
          size="small"
          sx={{
            width: "100%",
            maxWidth: "180px",
            height: "48px",
          }}
        >
          <Select
            id="display-select"
            variant="outlined"
            value={display}
            displayEmpty
            onChange={handleChange}
            sx={{
              height: "48px",
              borderRadius: "8px",
              "& .MuiOutlinedInput-notchedOutline": {
                border: "none !important",
              },
            }}
            MenuProps={{
              PaperProps: {
                sx: {
                  mt: "8px",
                  p: "4px",
                  borderRadius: "8px",
                },
              },
              MenuListProps: {
                sx: {
                  py: 0,
                  display: "flex",
                  flexDirection: "column",
                  gap: "8px",
                  "& .Mui-selected": {
                    backgroundColor: theme.palette.background.default,
                    color: theme.palette.brightPurple.main,
                  },
                },
              },
            }}
            inputProps={{
              sx: {
                color: theme.palette.brightPurple.main,
                display: "flex",
                alignItems: "center",
                px: "9px",
                gap: "20px",
              },
            }}
            IconComponent={(props) => <ArrowDown {...props} />}
          >
            <MenuItem
              value={1}
              sx={{
                display: "flex",
                alignItems: "center",
                gap: "20px",
                p: "4px",
                borderRadius: "5px",
                color: theme.palette.grey2.main,
              }}
            >
              Стандартная
            </MenuItem>
          </Select>
        </FormControl>
      </Box>
      <Box sx={{ display: "flex", alignItems: "center" }}>
        <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
          <TextField
            disabled
            id={"inputLinkone"}
            value={isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}
            sx={{
              "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                border: "none",
              },
              "& .MuiInputBase-root": {
                height: "48px",
                borderRadius: "10px 0 0 10px",
                backgroundColor: "#EEE4FC",
              },
            }}
          />
        </FormControl>
        <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
          <TextField
            value={quiz.qid}
            id={"inputLink"}
            fullWidth
            placeholder="6235840cc71"
            sx={{
              "& .MuiInputBase-root": {
                backgroundColor: theme.palette.background.default,
                height: "48px",
                borderRadius: "0 10px 10px 0",
              },
            }}
            inputProps={{
              sx: {
                borderRadius: "0 10px 10px 0",
                fontSize: "18px",
                lineHeight: "21px",
                py: 0,
              },
            }}
          />
        </FormControl>
        <IconButton
          onClick={CopyLink}
          id={"copyLink"}
          sx={{ borderRadius: "6px" }}
        >
          <CopyIcon
            color={theme.palette.brightPurple.main}
            bgcolor={"#EEE4FC"}
          />
        </IconButton>
      </Box>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-end",
        }}
      >
        <Typography sx={{ color: "#FC712F" }}>
          {quiz?.status === "start" ? "Опубликован" : "Не опубликован"}
        </Typography>
      </Box>
    </Paper>
  );
}
