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

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

type UserTabProps = {
  userId: string;
};

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

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

  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" && "Физ. лицо"}
            {account?.status === "org" && "Юр. лицо"}
            {account?.status === "nko" && "НКО"}
          </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 || 0} ${
              account?.wallet.currency || "RUB"
            }.`}
          </Typography>
        </Box>
      </Box>
    </Box>
  );
};