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 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>
  );
};