frontPanel/src/pages/Questions/UploadVideoModal.tsx

import { Box, Button, ButtonBase, Modal, Typography, useTheme } from "@mui/material";
import SelectableButton from "@ui_kit/SelectableButton";
import CustomTextField from "@ui_kit/CustomTextField";
import { useState } from "react";
import UploadIcon from "../../assets/icons/UploadIcon";

import type { DragEvent } from "react";

type BackgroundTypeModal = "linkVideo" | "ownVideo";

type HelpQuestionsProps = {
  open: boolean;
  onClose: () => void;
  video: string;
  onUpload: (number: string) => void;
};

export const UploadVideoModal = ({ open, onClose, video, onUpload }: HelpQuestionsProps) => {
  const [backgroundTypeModal, setBackgroundTypeModal] = useState<BackgroundTypeModal>("linkVideo");
  const theme = useTheme();

  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    event.stopPropagation();

    if (event.dataTransfer.files.length) {
      onUpload(URL.createObjectURL(event.dataTransfer.files[0]));
    }
  };

  return (
    <Modal open={open} onClose={onClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          maxWidth: "690px",
          bgcolor: "background.paper",
          borderRadius: "12px",
          boxShadow: 24,
          p: 0,
          overflow: "hidden",
        }}
      >
        <Box
          sx={{
            display: "flex",
            padding: "20px",
            background: theme.palette.background.default,
          }}
        >
          <Typography sx={{ color: "#9A9AAF" }}>
            Видео можно вставить с любого хостинга: YouTube, Vimeo или загрузить собственное
          </Typography>
          <Button onClick={onClose} variant="contained">
            Готово
          </Button>
        </Box>
        <Box sx={{ padding: "20px", gap: "10px", display: "flex" }}>
          <SelectableButton
            isSelected={backgroundTypeModal === "linkVideo"}
            onClick={() => setBackgroundTypeModal("linkVideo")}
            sx={{ maxWidth: "170px", padding: "10px" }}
          >
            Ссылка на видео
          </SelectableButton>
          <SelectableButton
            isSelected={backgroundTypeModal === "ownVideo"}
            onClick={() => setBackgroundTypeModal("ownVideo")}
            sx={{ maxWidth: "170px", padding: "10px" }}
          >
            Загрузить свое
          </SelectableButton>
        </Box>
        {backgroundTypeModal === "linkVideo" ? (
          <Box sx={{ padding: "20px" }}>
            <Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>Ссылка на видео</Typography>
            <CustomTextField
              placeholder={"http://example.com"}
              text={video}
              onChange={({ target }) => onUpload(target.value || " ")}
            />
          </Box>
        ) : (
          <Box sx={{ padding: "20px" }}>
            <Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>Загрузите видео</Typography>
            <ButtonBase component="label" sx={{ justifyContent: "flex-start", width: "100%" }}>
              <input
                onChange={({ target }) => {
                  if (target.files?.length) {
                    onUpload(URL.createObjectURL(target.files[0] || " "));
                  }
                }}
                hidden
                accept="video/*"
                multiple
                type="file"
              />
              <Box
                onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
                onDrop={handleDrop}
                sx={{
                  width: "580px",
                  padding: "33px 33px 33px 50px",
                  display: "flex",
                  alignItems: "center",
                  backgroundColor: theme.palette.background.default,
                  border: `1px solid ${theme.palette.grey2.main}`,
                  borderRadius: "8px",
                  gap: "50px",
                }}
              >
                <UploadIcon />
                <Box sx={{ color: "#9A9AAF" }}>
                  <Typography sx={{ fontWeight: "500" }}>Добавить видео</Typography>
                  <Typography sx={{ fontSize: "16px" }}>Принимает .mp4 и .mov формат — максимум 100мб</Typography>
                </Box>
              </Box>
            </ButtonBase>
          </Box>
        )}
      </Box>
    </Modal>
  );
};