import React, { useState, useContext } from "react";
import {
  Card,
  Box,
  Button,
  FormControl,
  Grid,
  InputLabel,
  OutlinedInput,
  Stack,
  Typography,
  FormHelperText,
} from "@mui/material";
import backgroundImage from "../assets/images/background_dot.png";
import { ThemeColors } from "../utility/context/ThemeColors.js";
import { useHistory } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useSnackbar } from "notistack";
import ApplicationService from "../services/ApplicationService.js";

const VerifyAndAccessSurvey = () => {
  const history = useHistory();
  const { t } = useTranslation();
  const { enqueueSnackbar } = useSnackbar();
  const [error, setError] = useState({
    email: "",
  });
  const [sendList, setSendList] = useState({
    email: "",
    tc: "",
    surveyLink: "",
  });

  const { colors } = useContext(ThemeColors);
  const isEmail = (email) => /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]/i.test(email);
  const currentURL = window.location.href;

  const onSendSurveyVerificationModalButtonPressed = async (e) => {
    e.preventDefault();
    if (!isEmail(sendList?.email) || sendList?.email === "") {
      setError({
        email: t("PasswordLabel.enterEmail"),
      });
    } else {
      await ApplicationService.http()
        .post(
          "/graphql",
          {
            query: `
            mutation {
              verifyAndAccessSurvey(
                participant_email: "${sendList?.email}",
                participant_id: "${sendList?.tc}",
                hashedLink: "${currentURL}",
              )
            }
           `,
          },
          {
            headers: {
              Authorization: "Bearer " + localStorage.getItem("accessToken"),
            },
          }
        )
        .then((response) => {
          if (response.data?.errors) {
            enqueueSnackbar("Doğrulama başarısız." + t("Warnings.notFound"), {
              variant: "error",
              preventDuplicate: true,
            });
          } else {
            enqueueSnackbar("Doğrulama başarılı.", {
              variant: "success",
              preventDuplicate: true,
            });
            const response1 =
              response.data.data.verifyAndAccessSurvey.split("redirect:");
            const redirectUrl = response1[1].trim();
            if (redirectUrl) {
              history.push(redirectUrl);
            } else {
              console.error("Invalid redirect URL.");
            }
          }
        });
    }
  };

  const renderVerify = () => {
    return (
      <Grid
        container
        justifyContent="center"
        alignItems="center"
        sx={{ minHeight: "calc(100vh - 68px)" }}
      >
        <Grid item sx={{ m: { xs: 1, sm: 3 }, mb: 0 }}>
          <Card
            sx={{
              maxWidth: { xs: 400, lg: 475 },
              margin: { xs: 2.5, md: 3 },
              "& > *": {
                flexGrow: 1,
                flexBasis: "50%",
              },
            }}
            content="false"
          >
            <Box sx={{ p: { xs: 2, sm: 3, xl: 5 } }}>
              <Grid
                container
                spacing={2}
                alignItems="center"
                justifyContent="center"
              >
                <Grid item xs={12}>
                  <Grid
                    container
                    direction="column-reverse"
                    alignItems="center"
                    justifyContent="center"
                  >
                    <Grid item>
                      <Stack
                        alignItems="center"
                        justifyContent="center"
                        spacing={1}
                      >
                        <Typography
                          color="#028a4a"
                          gutterBottom
                          variant="h3"
                          style={{
                            fontSize: "1.25rem",
                            color: colors.primary.dark,
                            fontWeight: 600,
                          }}
                        >
                          {"Anket Doğrulama"}
                        </Typography>
                        <Typography
                          variant="caption"
                          fontSize="15px"
                          textAlign="center"
                          style={{
                            color: "rgba(158, 158, 158, 0.7)",
                            fontWeight: 400,
                            lineHeight: 1.66,
                            maxWidth: 300,
                          }}
                        >
                          {/* {t("PasswordLabel.enterEmail")} */}
                        </Typography>
                      </Stack>
                    </Grid>
                  </Grid>
                </Grid>
                <Grid item xs={12}>
                  <form
                    noValidate
                    onSubmit={onSendSurveyVerificationModalButtonPressed}
                    id="login-form"
                  >
                    <FormControl
                      fullWidth
                      error={Boolean(error.email)}
                      sx={{ ...colors.primary.light }}
                    >
                      <InputLabel htmlFor="survey-email">Email</InputLabel>
                      <OutlinedInput
                        id="survey-email"
                        type="email"
                        value={sendList?.email}
                        name="email"
                        onChange={(e) =>
                          setSendList({
                            ...sendList,
                            email: e.target.value,
                          })
                        }
                        label="Email"
                      />
                    </FormControl>
                    <FormControl
                      fullWidth
                      error={Boolean(error.email)}
                      sx={{ ...colors.primary.light }}
                    >
                      <InputLabel htmlFor="survey-email">Anket Kodu</InputLabel>
                      <OutlinedInput
                        id="survey-tc"
                        type="tc"
                        value={sendList?.tc}
                        name="tc"
                        onChange={(e) =>
                          setSendList({
                            ...sendList,
                            tc: e.target.value,
                          })
                        }
                        label="tc"
                      />
                    </FormControl>
                    {error?.email && (
                      <Box sx={{ mt: 3 }}>
                        <FormHelperText error>{error.email}</FormHelperText>
                      </Box>
                    )}
                    <Box sx={{ mt: 2 }}>
                      <Button
                        disableElevation
                        fullWidth
                        size="large"
                        type="submit"
                        variant="contained"
                        color="success"
                        id="login-form-submit-button"
                      >
                        {"Görüntüle"}
                      </Button>
                    </Box>
                  </form>
                </Grid>
              </Grid>
            </Box>
          </Card>
        </Grid>
      </Grid>
    );
  };

  return (
    <Grid
      container
      direction="column"
      justifyContent="flex-end"
      sx={{ minHeight: "100vh" }}
      style={{
        backgroundImage: `url(${backgroundImage})`,
        backgroundRepeat: "repeat",
      }}
    >
      {renderVerify()}
    </Grid>
  );
};

export default VerifyAndAccessSurvey;