frontPanel/src/pages/ContactFormPage/SelectMask.tsx

import { Box, Link, Typography, useTheme } from "@mui/material";
import SelectableButton from "@ui_kit/SelectableButton";
import CustomTextField from "@ui_kit/CustomTextField";
import * as React from "react";
import { useState } from "react";

type SelectMask = "country" | "mymask";
export default function SelectMask() {
  const [State, setState] = React.useState(false);
  const StateHC = (bool: boolean) => {
    setState(bool);
  };

  const theme = useTheme();
  const [selectMask, setSelectMask] = useState<SelectMask>("country");
  return (
    <>
      <Box
        sx={{
          display: "flex",
          gap: "10px",
        }}
      >
        <SelectableButton
          isSelected={selectMask === "country"}
          onClick={() => setSelectMask("country")}
        >
          Выбор страны
        </SelectableButton>
        <SelectableButton
          isSelected={selectMask === "mymask"}
          onClick={() => setSelectMask("mymask")}
        >
          Своя маска
        </SelectableButton>
      </Box>
      {selectMask === "country" ? (
        <>
          <Typography>
            Посетителю нужно будет выбрать страну и ввести номер телефона.
            Страна определяется автоматически в зависимости от настроек браузера
          </Typography>
          <Link
            component="button"
            variant="body2"
            sx={{ color: theme.palette.brightPurple.main, textAlign: "left" }}
            onClick={() => {
              StateHC(!State);
            }}
          >
            Расширенные настройки
          </Link>
          {State ? (
            <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
              <Box
                sx={{ display: "flex", flexDirection: "column", gap: "10px" }}
              >
                <Typography>Страна по умолчанию</Typography>
                <CustomTextField
                  placeholder={"Введите страну на английском языке"}
                />
                <Typography sx={{ fontSize: "12px", lineHeight: "14px" }}>
                  Если ничего не выбрано, страна будет выбрана автоматически
                </Typography>
              </Box>
              <Box
                sx={{ display: "flex", flexDirection: "column", gap: "10px" }}
              >
                <Typography>Выделенные страны</Typography>
                <CustomTextField
                  placeholder={"Введите страну на английском языке"}
                />
                <Typography sx={{ fontSize: "12px", lineHeight: "14px" }}>
                  Выбранные страны будут показываться вверху списка
                </Typography>
              </Box>
              <Box
                sx={{ display: "flex", flexDirection: "column", gap: "10px" }}
              >
                <Typography>Показываемые страны</Typography>
                <CustomTextField
                  placeholder={"Введите страну на английском языке"}
                />
                <Typography sx={{ fontSize: "12px", lineHeight: "14px" }}>
                  Будут показываться только выбранные страны
                </Typography>
              </Box>
              <Box
                sx={{ display: "flex", flexDirection: "column", gap: "10px" }}
              >
                <Typography>Игнорируемые страны</Typography>
                <CustomTextField
                  placeholder={"Введите страну на английском языке"}
                />
                <Typography sx={{ fontSize: "12px", lineHeight: "14px" }}>
                  Выбранные страны будут не будут показываться в списке
                </Typography>
              </Box>
            </Box>
          ) : (
            <></>
          )}
        </>
      ) : (
        <>
          <CustomTextField placeholder={""} text={"+7 900 000 00 00"} />
        </>
      )}
    </>
  );
}