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

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

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

  const infoItem = (title: string, value: string | number | undefined) => (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        mt: "20px",
      }}
    >
      <Box sx={{ width: isMobile ? "100%" : "45%" }}>
        <Typography sx={{
          fontSize: "16px",
          lineHeight: "18.96px",

          color: theme.palette.grey2.main
        }}>{title}:</Typography>
      </Box>
      <Box sx={{
        width: isMobile ? "100%" : "45%",
        mt: "5px",
      }}>
        <Typography>{value || "нет данных"}</Typography>
      </Box>
    </Box>
  );

  const infoItemLink = (title: string, link: string | undefined) => (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        mt: "20px",
      }}
    >
      <Box sx={{ width: "100%" }}>
        <Typography sx={{
          color: theme.palette.grey2.main,
          fontSize: "16px",
          lineHeight: "18.96px",
        }}>{title}:</Typography>
      </Box>
      <Box sx={{ width: "100%" }}>
        {
          link ?
            <a
              target="_blank"
              href={link}
              style={{
                wordBreak: "break-word",
                fontSize: "18px",
                lineHeight: "21.33px",
                color: "#7E2AEA"
              }}
            >
              {link}
            </a>
            :
            <Typography>не указана</Typography>
        }
      </Box>
    </Box >
  );

  return (
    <Box
      sx={{
        display: "inline-flex",
        flexDirection: "column",
        justifyContent: "space-between",
        height: "100%",
        overflow: "auto",
        flexGrow: 1,
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",

          flexDirection: isMobile ? "column" : "row",

          width: "100%",
          height: "100%",
          overflow: "auto",
        }}
      >
        <Box>
          <Typography
            sx={{
              fontSize: "18px",
              color: theme.palette.grey3.main,
              lineHeight: "21.33px",
            }}
          >
            Информация об аккаунте
          </Typography>
          <Typography
            sx={{
              m: "5px 0 19px 0",
              lineHeight: "16.59px",
              color: theme.palette.grey2.main,
              fontSize: "14px",
            }}
          >
            1 шаг
          </Typography>
          {infoItem("Amo ID", accountInfo?.amoID)}
          {infoItem("Имя аккаунта", accountInfo?.name)}
          {infoItemLink("ЛК в amo", `https://${accountInfo?.subdomain}.amocrm.ru/dashboard/`)}
          {infoItemLink("Профиль пользователя в amo", `https://${accountInfo?.subdomain}.amocrm.ru/settings/users/`)}
          {infoItem("Страна пользователя", accountInfo?.country)}
        </Box>
        <Box>

        <Button
          variant="outlined"
          startIcon={
            <AccountSetting
              color={theme.palette.brightPurple.main}
              height={"20px"}
              width={"20px"}
            />
          }
          onClick={toChangeAccount}
          sx={{
            height: "44px",
            padding: "0",
            mt: isMobile ? "30px" : "0",
            width: "205px",
            backgroundColor: "transparent",
            color: theme.palette.brightPurple.main,
            "& .MuiButton-startIcon": {
              marginRight: isMobile ? 0 : "8px",
              marginLeft: 0,
            },
            "&:hover": {
              backgroundColor: theme.palette.brightPurple.main,
              color: theme.palette.common.white,
              "& path": {
                stroke: theme.palette.common.white,
              },
              "& circle": {
                stroke: theme.palette.common.white,
              },
            },
            "&:active": {
              backgroundColor: "#581CA7",
              color: theme.palette.common.white,
              "& path": {
                stroke: theme.palette.common.white,
              },
              "& circle": {
                stroke: theme.palette.common.white,
              },
            },
          }}
        >
          Сменить аккаунт
        </Button>
        </Box>
      </Box>
      <StepButtonsBlock
        isSmallBtnDisabled={true}
        onLargeBtnClick={handleNextStep}
        largeBtnText={"Далее"}
      />
    </Box>
  );
};