import {
  Box,
  Button,
  FormControl,
  IconButton,
  MenuItem,
  TextField as MuiTextField,
  Paper,
  Select,
  SelectChangeEvent,
  TextFieldProps,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { FC, useState } from "react";
import ArrowDown from "@/assets/icons/ArrowDownIcon";
import CopyIcon from "@/assets/icons/CopyIcon";
import LinkIcon from "@/assets/icons/LinkIcon";
import { ReactComponent as PlusIco } from "@/assets/icons/PlusIco.svg";
import { InfoPopover } from "@/ui_kit/InfoPopover";
import { UtmsModal } from "./UtmsModal";
const TextField = MuiTextField as unknown as FC<TextFieldProps>;


export default function QuizMarkCreate() {
  const theme = useTheme();
  const quiz = useCurrentQuiz();
  const [display, setDisplay] = useState("1");
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const [isUtmsOpen, setIsUtmsOpen] = useState(false);

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

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

  if (!quiz) return null;

  return (
    <Paper
      sx={{
        boxSizing: "border-box",
        maxWidth: "580px",
        width: "100%",
        padding: "22px 18px 20px 20px",
        borderRadius: "12px",
        display: "flex",
        flexDirection: "column",
        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 color="#4D4D4D">Создание/выбор utm меток</Typography>
        </Box>
        <Box>

          <InfoPopover />
          <FormControl
            fullWidth
            size="small"
            sx={{

              width: "100%",
              maxWidth: "118px",
              height: "24px",
            }}
          >
            <Select
              id="display-select"
              variant="outlined"
              value={display}
              displayEmpty
              onChange={handleChange}
              sx={{
                height: "24px",
                borderRadius: "8px",
                "& .MuiOutlinedInput-notchedOutline": {
                  border: "none !important",
                },
                "& .MuiSelect-icon": {
                  position: 'relative',
                  marginBottom: '13px',
                }
              }}
              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: "20px",
                  gap: "20px"
                },
              }}
              IconComponent={(props) => <ArrowDown  {...props} sx={{
                position: 'relative',
                top: '-5px', // Поднимаем вверх
                right: '5px'
              }} />}

            >
              <MenuItem
                value={1}
                sx={{
                  display: "flex",
                  gap: "20px",
                  p: "4px",
                  borderRadius: "5px",
                  color: theme.palette.grey2.main,
                }}
              >
                Google
              </MenuItem>
            </Select>
          </FormControl>
        </Box>
      </Box>
      <Box sx={{ display: "inline-flex", alignItems: "center", justifyContent: "space-between", margin: "30px 0px 0px 0px" }}>
        <Box sx={{ display: "inline-flex" }}>
          <FormControl variant="standard" sx={{ p: 0 }}>
            <TextField
              disabled
              id="inputMarkLinkone"
              placeholder="Название"
              sx={{
                width: isTablet ? "100%" : "182px",
                maxWidth: "182px",
                "& .MuiInputBase-root": {

                  height: "48px",
                  color: "#525253",
                  borderRadius: "8px 0 0 8px",
                  backgroundColor: "#F2F3F7",
                },
              }}
            />
          </FormControl>
          <FormControl variant="standard" sx={{ p: 0 }}>
            <TextField
              placeholder="пример-ссылки-с-utm-метками"

              sx={{

                "& .MuiInputBase-root": {
                  color: "#525253",
                  width: isTablet ? "100%" : "317px",
                  maxWidth: "317px",
                  height: "48px",
                  borderRadius: "0 8px 8px 0",
                  backgroundColor: "#F2F3F7"
                },
              }}
              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>

      <Box sx={{ display: "inline-flex", margin: "11px 0 0 0", alignItems: "flex-end" }}>
        <IconButton sx={{ borderRadius: "6px", padding: "0px 0px 0px 0px" }} onClick={() => setIsUtmsOpen(true)}>
          <PlusIco></PlusIco>
        </IconButton>
        <Button variant="contained" sx={{ width: "133px", height: "44px", margin: "0px 0 0 auto" }}>Сохранить</Button>
      </Box>
      <UtmsModal open={isUtmsOpen} onClose={() => setIsUtmsOpen(false)} quizBackendId={quiz?.backendId} />
    </Paper>
  );

}