import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
import { FC } from "react";
import { AccountResponse } from "@api/integration";

type AmoAccountInfoProps = {
  handleNextStep: () => void;
  accountInfo: AccountResponse;
};

export const AmoAccountInfo: FC<AmoAccountInfoProps> = ({
  handleNextStep,
  accountInfo,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  const infoItem = (title: string, value: string | number) => (
    <Box
      sx={{
        display: "flex",
        flexDirection: isMobile ? "column" : "row",
        justifyContent: "space-between",
      }}
    >
      <Box sx={{ width: isMobile ? "100%" : "45%" }}>
        <Typography sx={{ color: theme.palette.grey2.main }}>
          {title}:
        </Typography>
      </Box>
      <Box sx={{ width: isMobile ? "100%" : "45%" }}>
        <Typography>{value}</Typography>
      </Box>
    </Box>
  );

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        flexGrow: 1,
      }}
    >
      <Box
        sx={{
          marginTop: isMobile ? "20px" : "60px",
          display: "flex",
          flexDirection: "column",
          gap: isMobile ? "10px" : "20px",
        }}
      >
        {infoItem("Amo ID", accountInfo.AmoID)}
        {infoItem("Имя аккаунта", accountInfo.Name)}
        {infoItem("Email аккаунта", accountInfo.Email)}
        {infoItem("Роль", accountInfo.Role)}
        {infoItem("Группа пользователя", accountInfo.Group)}
        {infoItem("URL профиля пользователя в Amo", accountInfo.Subdomain)}
        {infoItem("Страна пользователя", accountInfo.Country)}
      </Box>
      <StepButtonsBlock
        isSmallBtnDisabled={true}
        onLargeBtnClick={handleNextStep}
        largeBtnText={"Далее"}
      />
    </Box>
  );
};