import { useEffect } from "react";
import { Box, Button, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import UserFields from "./UserFields";
import { openDocumentsDialog, sendUserData, setSettingsField, useUserStore } from "@root/stores/user";
import UnderlinedButtonWithIcon from "@root/components/UnderlinedButtonWithIcon";
import UploadIcon from "@root/components/icons/UploadIcon";
import DocumentsDialog from "./DocumentsDialog/DocumentsDialog";
import EyeIcon from "@root/components/icons/EyeIcon";
import { cardShadow } from "@root/utils/theme";
import { getMessageFromFetchError } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";
import { VerificationStatus } from "@root/model/account";
import { verify } from "./helper";

export default function AccountSettings() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const upSm = useMediaQuery(theme.breakpoints.up("sm"));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  const fields = useUserStore((state) => state.settingsFields);
  const verificationStatus = useUserStore((state) => state.verificationStatus);
  const verificationType = useUserStore((state) => state.verificationType);
  const comment = useUserStore((state) => state.comment);
  const userId = useUserStore((state) => state.userId) ?? "";

  useEffect(() => {
    verify(userId);
  }, []);

  

  const verificationStatusData: Record<VerificationStatus, { text: string; color: string }> = {
    verificated: { text: "Верификация пройдена", color: "#0D9F00" },
    waiting: { text: "В ожидании верификации", color: "#F18956" },
    notVerificated: { text: "Не верифицирован", color: "#E02C2C" },
  };

  function handleSendDataClick() {
    sendUserData()
      .then(() => {
        enqueueSnackbar("Информация обновлена");
      })
      .catch((error) => {
        const message = getMessageFromFetchError(error);
        if (message) enqueueSnackbar(message);
      });
  }

  function VerificationIndicator({
    verificationStatus,
    sx,
  }: {
    verificationStatus: VerificationStatus;
    sx?: SxProps<Theme>;
  }) {
    return (
      <Box
        sx={{
          py: "14px",
          px: "8.5px",
          borderWidth: "1px",
          borderStyle: "solid",
          color: verificationStatusData[verificationStatus].color,
          borderColor: verificationStatusData[verificationStatus].color,
          borderRadius: "8px",
          textAlign: "center",
          ...sx,
        }}
      >
        <Typography lineHeight="100%">{verificationStatusData[verificationStatus].text}</Typography>
      </Box>
    );
  }

  console.log("компонент настройки юзера")
  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: "25px",
        mb: "70px",
        px: isTablet ? (isMobile ? "18px" : "40px") : "20px",
      }}
    >
      <DocumentsDialog />
      <Typography variant="h4" mt="20px">
        Настройки аккаунта
      </Typography>
      <Box
        sx={{
          mt: "40px",
          mb: "40px",
          backgroundColor: "white",
          display: "flex",
          flexDirection: "column",
          borderRadius: "12px",
          p: "20px",
          gap: "40px",
          boxShadow: cardShadow,
        }}
      >
        <Box
          sx={{
            display: "flex",
            gap: "31px",
            justifyContent: "space-between",
            flexDirection: upMd ? "row" : "column",
          }}
        >
          <UserFields/>
          <Box
            sx={{
              maxWidth: "246px",
            }}
          >
            <Typography variant="p1">Статус</Typography>
            <VerificationIndicator verificationStatus={verificationStatus} sx={{ mt: "16px", p: "14px 7.5px" }} />
            {verificationStatus === VerificationStatus.NOT_VERIFICATED && (
              <>
                <UnderlinedButtonWithIcon
                  icon={<UploadIcon />}
                  sx={{ mt: "55px" }}
                  ButtonProps={{
                    onClick: () => openDocumentsDialog("juridical"),
                  }}
                >
                  Загрузить документы для юр лиц
                </UnderlinedButtonWithIcon>
                <UnderlinedButtonWithIcon
                  icon={<UploadIcon />}
                  sx={{ mt: "15px" }}
                  ButtonProps={{
                    onClick: () => openDocumentsDialog("nko"),
                  }}
                >
                  Загрузить документы для НКО
                </UnderlinedButtonWithIcon>
              </>
            )}
            {verificationStatus === VerificationStatus.VERIFICATED && (
              <UnderlinedButtonWithIcon
                icon={<EyeIcon />}
                sx={{ mt: "55px" }}
                ButtonProps={{
                  onClick: () => openDocumentsDialog(verificationType),
                }}
              >
                Посмотреть свою верификацию
              </UnderlinedButtonWithIcon>
            )}
            {comment && <p>{comment}</p>}
          </Box>
        </Box>
        <Button
          variant="pena-contained-dark"
          onClick={handleSendDataClick}
          disabled={fields.hasError}
          sx={{ alignSelf: "end" }}
        >
          Сохранить
        </Button>
      </Box>
    </SectionWrapper>
  );
}