frontPanel/src/pages/Questions/UploadVideoModal.tsx

import { Box, Button, ButtonBase, Dialog, Typography, useTheme } from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import SelectableButton from "@ui_kit/SelectableButton";
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 | null;
  onUpload: (number: string) => void;
};

export default function 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 (
    <Dialog
      open={open}
      onClose={onClose}
      PaperProps={{
        sx: {
          maxWidth: "640px",
          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"}
            value={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>
      )}
    </Dialog>
  );
}