import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { FC } from "react";
import { AmoButton } from "../../../../components/AmoButton/AmoButton";
import { connectBitrix } from "@/api/bitrixIntegration";

type IntegrationStep1Props = {
  handleNextStep: () => void;
};

// interface Values {
//   login: string;
//   password: string;
// }
//
// const initialValues: Values = {
//   login: "",
//   password: "",
// };
//
// const validationSchema = object({
//   login: string().required("Поле обязательно"),
//   password: string().required("Поле обязательно").min(8, "Минимум 8 символов"),
// });

export const BitrixLogin: FC<IntegrationStep1Props> = ({ handleNextStep }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  const onAmoClick = async () => {
    const [url, error] = await connectBitrix();
    if (url && !error) {
      window.open(url, "_blank");
    }
  };

  // const formik = useFormik<Values>({
  //   initialValues,
  //   validationSchema,
  //   onSubmit: async (values, formikHelpers) => {
  //     const loginTrimmed = values.login.trim();
  //     const passwordTrimmed = values.password.trim();
  //     try {
  //       // Simulate a network request
  //       await new Promise((resolve) => setTimeout(resolve, 2000));
  //       handleNextStep();
  //     } catch (error) {
  //       formikHelpers.setSubmitting(false);
  //       if (error instanceof Error) {
  //         formikHelpers.setErrors({
  //           login: error.message,
  //           password: error.message,
  //         });
  //       }
  //     }
  //   },
  // });

  return (
    <Box
      // component="form"
      // onSubmit={formik.handleSubmit}
      // noValidate
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        flexGrow: 1,
      }}
    >
      {/*<Box*/}
      {/*  sx={{*/}
      {/*    marginTop: "68px",*/}
      {/*    width: isMobile ? "100%" : "500px",*/}
      {/*    display: "flex",*/}
      {/*    flexDirection: "column",*/}
      {/*    alignItems: "center",*/}
      {/*    gap: "15px",*/}
      {/*  }}*/}
      {/*>*/}
      {/*  <InputTextfield*/}
      {/*    TextfieldProps={{*/}
      {/*      value: formik.values.login,*/}
      {/*      placeholder: "+7 900 000 00 00 или username@penahaub.com",*/}
      {/*      onBlur: formik.handleBlur,*/}
      {/*      error: formik.touched.login && Boolean(formik.errors.login),*/}
      {/*      helperText: formik.touched.login && formik.errors.login,*/}
      {/*      "data-cy": "login",*/}
      {/*    }}*/}
      {/*    onChange={formik.handleChange}*/}
      {/*    color={theme.palette.background.default}*/}
      {/*    id="login"*/}
      {/*    label="Телефон или E-mail"*/}
      {/*    gap="10px"*/}
      {/*  />*/}
      {/*  <PasswordInput*/}
      {/*    TextfieldProps={{*/}
      {/*      value: formik.values.password,*/}
      {/*      placeholder: "Не менее 8 символов",*/}
      {/*      onBlur: formik.handleBlur,*/}
      {/*      error: formik.touched.password && Boolean(formik.errors.password),*/}
      {/*      helperText: formik.touched.password && formik.errors.password,*/}
      {/*      type: "password",*/}
      {/*      "data-cy": "password",*/}
      {/*    }}*/}
      {/*    onChange={formik.handleChange}*/}
      {/*    color={theme.palette.background.default}*/}
      {/*    id="password"*/}
      {/*    label="Пароль"*/}
      {/*    gap="10px"*/}
      {/*  />*/}
      {/*</Box>*/}
      <Box sx={{ marginTop: "70px", width: isMobile ? "100%" : "500px" }}>
        <Typography
          sx={{
            fontSize: "16px",
            fontWeight: "400",
            color: theme.palette.grey2.main,
            lineHeight: "1",
          }}
        >
          Инструкция
        </Typography>
        <Typography
          sx={{
            marginTop: "12px",
            fontSize: "18px",
            fontWeight: "400",
            color: theme.palette.grey3.main,
            lineHeight: "1",
          }}
        >
          После нажатия на кнопку - "Подключить", вас переадресует на страницу подключения интеграции в ваш аккаунт
          Bitrix24. Пожалуйста, согласитесь на всё, что мы предлагаем, иначе чуда не случится.
        </Typography>
      </Box>
      <Box sx={{ marginTop: "50px" }}>
        <AmoButton onClick={onAmoClick} />
      </Box>
      {/*<StepButtonsBlock*/}
      {/*  isSmallBtnDisabled={true}*/}
      {/*  largeBtnType={"submit"}*/}
      {/*  // isLargeBtnDisabled={formik.isSubmitting}*/}
      {/*  largeBtnText={"Войти"}*/}
      {/*/>*/}
    </Box>
  );
};