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

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

export const AccountInfo: 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>
  );

  const infoItemLink = (title: string, link: string) => (
    <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%" }}>
        <a
          target="_blank"
          href={link}
          style={{wordBreak: "break-word"}}
        >
          {link}
        </a>
      </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)} */}
        {infoItemLink("ЛК в amo", `https://${accountInfo.subdomain}.amocrm.ru/dashboard/`)}
        {infoItemLink("Профиль пользователя в amo", `https://${accountInfo.subdomain}.amocrm.ru/settings/users/`)}
        {infoItem("Страна пользователя", accountInfo.country)}
      </Box>
      <StepButtonsBlock
        isSmallBtnDisabled={true}
        onLargeBtnClick={handleNextStep}
        largeBtnText={"Далее"}
      />
    </Box>
  );
};