import { useState } from "react";
import { useLinkClickHandler } from "react-router-dom";
import {
  Box,
  Modal,
  Fade,
  Backdrop,
  Typography,
  Tabs,
  Tab,
  useTheme,
  useMediaQuery,
} from "@mui/material";

import { UserTab } from "./UserTab";
import { PurchaseTab } from "./PurchaseTab";
import { TransactionsTab } from "./TransactionsTab";
import { VerificationTab } from "./VerificationTab";

import userIcon from "@root/assets/icons/user.svg";
import packageIcon from "@root/assets/icons/package.svg";
import transactionsIcon from "@root/assets/icons/transactions.svg";
import checkIcon from "@root/assets/icons/check.svg";
import forwardIcon from "@root/assets/icons/forward.svg";

import type { SyntheticEvent } from "react";

const TABS = [
  { name: "Пользователь", icon: userIcon },
  { name: "Покупка товаров и услуг", icon: packageIcon },
  { name: "Транзакции", icon: transactionsIcon },
  { name: "Верификация", icon: checkIcon },
];

const ModalUser = () => {
  const [value, setValue] = useState<number>(0);
  const [openNavigation, setOpenNavigation] = useState<boolean>(false);
  const theme = useTheme();
  const tablet = useMediaQuery(theme.breakpoints.down(1070));
  const mobile = useMediaQuery(theme.breakpoints.down(700));

  return (
    <>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open
        onClose={useLinkClickHandler("/users")}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in>
          <Box
            sx={{
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
              display: "flex",
              flexDirection: "column",
              width: mobile ? "100%" : "98vw",
              maxWidth: tablet ? "920px" : "1070px",
              height: mobile ? "100%" : "605px",
              bgcolor: theme.palette.background.default,
              color: theme.palette.secondary.main,
              boxShadow: 24,
              borderRadius: mobile ? "0" : "12px",
              outline: "none",
              overflowX: "hidden",
            }}
          >
            <Typography
              id="transition-modal-title"
              variant="caption"
              sx={{
                display: "block",
                textAlign: "center",
                fontSize: "18px",
                padding: "12px",
                color: theme.palette.common.white,
                background: "#9A9AAF",
              }}
            >
              Пользователь сервиса
            </Typography>

            <Box sx={{ width: "100%", height: "100%", display: "flex" }}>
              <Box
                sx={{
                  width: "100%",
                  height: "100%",
                  maxWidth: mobile
                    ? openNavigation
                      ? "276px"
                      : "68px"
                    : "276px",
                }}
              >
                {mobile && (
                  <img
                    src={forwardIcon}
                    alt="forward"
                    style={{
                      display: "block",
                      width: "11px",
                      margin: "25px 0 15px 28px",
                      transform: openNavigation ? "rotate(180deg)" : "",
                      transition: ".2s",
                    }}
                    onClick={() => setOpenNavigation((isOpened) => !isOpened)}
                  />
                )}
                <Tabs
                  orientation="vertical"
                  variant="scrollable"
                  value={value}
                  onChange={(event: SyntheticEvent, newValue: number) =>
                    setValue(newValue)
                  }
                  aria-label="Vertical tabs example"
                  sx={{
                    padding: mobile ? "16px" : "10px",
                    width: "100%",
                  }}
                  TabIndicatorProps={{ style: { background: "transparent" } }}
                >
                  {TABS.map(({ name, icon }) => (
                    <Tab
                      icon={<img src={icon} alt={name} />}
                      iconPosition="start"
                      key={name}
                      label={mobile ? (openNavigation ? name : "") : name}
                      sx={{
                        justifyContent: "flex-start",
                        textTransform: "inherit",
                        minHeight: "auto",
                        minWidth: "auto",
                        fontSize: "15px",
                        padding: mobile ? "9px" : "15px",
                        marginBottom: mobile ? "15px" : "5px",
                        color: theme.palette.common.black,
                        whiteSpace: "nowrap",
                        lineHeight: "18px",
                        "&.MuiButtonBase-root.Mui-selected": {
                          borderRadius: "12px",
                          color: "#7E2AEA",
                          background: "rgba(126, 42, 234, 0.07)",
                        },
                      }}
                    />
                  ))}
                </Tabs>
              </Box>

              <Box
                sx={{
                  position: "relative",
                  width: "100%",
                  color: theme.palette.common.black,
                  boxShadow: "inset 30px 0px 40px 0px rgba(210, 208, 225, 0.2)",
                }}
              >
                {value === 0 && <UserTab />}
                {value === 1 && <PurchaseTab />}
                {value === 2 && <TransactionsTab />}
                {value === 3 && <VerificationTab />}
              </Box>
            </Box>
          </Box>
        </Fade>
      </Modal>
    </>
  );
};

export default ModalUser;