frontPanel/src/pages/Questions/helpQuestions.tsx

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

import type { DragEvent } from "react";

type BackgroundType = "text" | "video";
type BackgroundTypeModal = "linkVideo" | "ownVideo";

export default function HelpQuestions() {
  const [open, setOpen] = useState(false);
  const [video, setVideo] = useState("");
  const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
  const [backgroundTypeModal, setBackgroundTypeModal] =
    useState<BackgroundTypeModal>("linkVideo");
  const theme = useTheme();

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const videoHC = (fileList: FileList | null) => {
    if (fileList?.length) {
      const file = fileList[0];
      setVideo(URL.createObjectURL(file));
      handleClose();
    }
  };

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

    videoHC(event.dataTransfer.files);
  };

  return (
    <Box
      sx={{
        padding: "20px",
        display: "flex",
        flexDirection: "column",
        gap: "20px",
      }}
    >
      <Typography sx={{ fontWeight: "500" }}>Подсказка консультанта</Typography>
      <Box
        sx={{
          display: "flex",
          gap: "10px",
        }}
      >
        <SelectableButton
          isSelected={backgroundType === "text"}
          onClick={() => setBackgroundType("text")}
          sx={{ maxWidth: "130px" }}
        >
          Текст
        </SelectableButton>
        <SelectableButton
          isSelected={backgroundType === "video"}
          onClick={() => setBackgroundType("video")}
          sx={{ maxWidth: "130px" }}
        >
          Видео
        </SelectableButton>
      </Box>
      {backgroundType === "text" ? (
        <>
          <CustomTextField placeholder={"Текст консультанта"} text={""} />
        </>
      ) : (
        <Box>
          <Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>
            Загрузите видео
          </Typography>
          <ButtonBase
            onClick={handleOpen}
            sx={{ justifyContent: "flex-start" }}
          >
            {video ? (
              <video src={video} width="400" controls />
            ) : (
              <>
                <UploadBox
                  icon={<UploadIcon />}
                  sx={{
                    height: "48px",
                    width: "48px",
                  }}
                />
              </>
            )}
          </ButtonBase>
          <Modal
            open={open}
            onClose={handleClose}
            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,
              }}
            >
              <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={""}
                  />
                </Box>
              ) : (
                <Box sx={{ padding: "20px" }}>
                  <Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>
                    Загрузите видео
                  </Typography>
                  <ButtonBase
                    component="label"
                    sx={{ justifyContent: "flex-start", width: "100%" }}
                  >
                    <input
                      onChange={(event) => videoHC(event.target.files)}
                      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>
        </Box>
      )}
    </Box>
  );
}