import { useState, useEffect } from "react";
import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
import { useParams } from "react-router-dom";

import { getUserInfo } from "@root/api/user";
import { getAccountInfo } from "@root/api/account";

import type { UserType } from "@root/api/roles";
import type { Account } from "@root/api/account";

export const UserTab = () => {
  const [user, setUser] = useState<UserType | null>(null);
  const [account, setAccount] = useState<Account | null>(null);
  const { userId } = useParams();
  const theme = useTheme();
  const mobile = useMediaQuery(theme.breakpoints.down(700));

  useEffect(() => {
    if (userId) {
      getUserInfo(userId).then(setUser);
      getAccountInfo(userId).then(setAccount);
    }
  }, []);

  return (
    <Box
      sx={{
        display: mobile ? "block" : "flex",
        columnGap: "15px",
        padding: "25px",
      }}
    >
      <Box sx={{ maxWidth: "300px", width: "100%" }}>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>ID</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {user?._id}
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Дата регистрации</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {new Date(user?.createdAt || "").toLocaleDateString()}
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Email</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {user?.email}
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Телефон</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {user?.phoneNumber}
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>Тип:</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {account?.status === "no" ? "НКО" : "Юр. лицо"}
          </Typography>
        </Box>
      </Box>
      <Box sx={{ maxWidth: "300px", width: "100%" }}>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>ФИО:</Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {`${account?.name.secondname || ""} ${
              account?.name.firstname || ""
            } ${account?.name.middlename || ""}`}
          </Typography>
        </Box>
        <Box sx={{ marginBottom: "25px" }}>
          <Typography sx={{ lineHeight: "20px" }}>
            Внутренний кошелек
          </Typography>
          <Typography sx={{ lineHeight: "20px", fontWeight: "bold" }}>
            {`${account?.wallet.money || ""} ${
              account?.wallet.currency || "RUB"
            }.`}
          </Typography>
        </Box>
      </Box>
    </Box>
  );
};