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";

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

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

  const videoHC = (videoInp: HTMLInputElement) => {
    const fileList = videoInp.files;
    if (fileList !== null) {
      const file = fileList[0];
      setVideo(URL.createObjectURL(file));
      handleClose();
    }
  };
  const [video, setVideo] = React.useState("");

  return (
    <Box sx={{ padding: "20px", display: "flex", flexDirection: "column", gap: "20px" }}>
      <Typography>Подсказка консультанта</Typography>
      <Box
        sx={{
          display: "flex",
          gap: "10px",
        }}
      >
        <SelectableButton isSelected={backgroundType === "text"} onClick={() => setBackgroundType("text")}>
          Текст
        </SelectableButton>
        <SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
          Видео
        </SelectableButton>
      </Box>
      {backgroundType === "text" ? (
        <>
          <CustomTextField placeholder={"Текст консультанта"} text={""} />
        </>
      ) : (
        <Box>
          <Typography sx={{ paddingBottom: "15px" }}>Загрузите видео</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>
                  Видео можно вставить с любого хостинга: YouTube, Vimeo или загрузить собственное
                </Typography>
                <Button variant="contained">Готово</Button>
              </Box>
              <Box sx={{ padding: "20px", gap: "10px", display: "flex" }}>
                <SelectableButton
                  isSelected={backgroundTypeModal === "linkVideo"}
                  onClick={() => setBackgroundTypeModal("linkVideo")}
                >
                  Ссылка на видео
                </SelectableButton>
                <SelectableButton
                  isSelected={backgroundTypeModal === "ownVideo"}
                  onClick={() => setBackgroundTypeModal("ownVideo")}
                >
                  Загрузить свое
                </SelectableButton>
              </Box>
              {backgroundTypeModal === "linkVideo" ? (
                <Box sx={{ padding: "20px" }}>
                  <Typography sx={{ paddingBottom: "15px" }}>Ссылка на видео</Typography>
                  <CustomTextField placeholder={"http://example.com"} text={""} />
                </Box>
              ) : (
                <Box sx={{ padding: "20px" }}>
                  <Typography sx={{ paddingBottom: "15px" }}>Загрузите видео</Typography>
                  <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
                    <input onChange={(event) => videoHC(event.target)} hidden accept="video/*" multiple type="file" />
                    <Box
                      sx={{
                        width: "580px",
                        padding: "33px",
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        backgroundColor: theme.palette.background.default,
                        border: `1px solid ${theme.palette.grey2.main}`,
                        borderRadius: "8px",
                      }}
                    >
                      <UploadIcon />
                      <Box>
                        <Typography>Добавить видео</Typography>
                        <Typography>Принимает .mp4 и .mov формат — максимум 100мб</Typography>
                      </Box>
                    </Box>
                  </ButtonBase>
                </Box>
              )}
            </Box>
          </Modal>
        </Box>
      )}
    </Box>
  );
}