import Input from "@/components/forms/input";
import style from "./style.module.css";
import { Button } from "@mui/material";
import DialogBox from "./dialog";
import axios from "../../../utils/axiosPayment";
import { useState } from "react";
import { convertNumbers2English } from "../../../utils/index";
import { enqueueSnackbar } from "notistack";

const Form = () => {
  const initialState = {
    username: "",
    paypalUsername: "",
    whatupUsername: "",
  };

  const validateEmail = (value) => {
    var allowed =
      /^([a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$)/ || /^[0-9]+$/;
    var numberallowed = /^[0-9]+$/;
    if (allowed.test(value) || numberallowed.test(value)) {
      return true;
    } else {
      return false;
    }
  };

  const [state, setState] = useState(initialState);
  const [isOpen, setIsOpen] = useState(false);

  const inputHandler = (value, name) => {
    setState({ ...state, [name]: convertNumbers2English(value) });
  };

  const disableHanlder = () => {
    if (!state.username || !state.paypalUsername) {
      return true;
    } else {
      return false;
    }
  };

  const errorTextHandler = (error) => {
    for (const property in error) {
      if (error[property][0] !== null) {
        return error[property][0];
      }
    }
  };

  const submit = async () => {
    const data = {
      username: state.username,
      paypalUsername: state.paypalUsername,
      whatupUsername: state.whatupUsername,
    };
    const request = await axios.post("paypal/create", data);
    if (request?.data?.valid) {
      setIsOpen(true);
    } else {
      enqueueSnackbar(
        request?.data?.statusCode == 400
          ? errorTextHandler(request?.data.errors)
          : "عملیات با خطا مواجه شد",
        { variant: "error" }
      );
    }
  };

  return (
    <div className={style.form}>
      <div className={style.item}>
        <Input
          value={state.username}
          type="text"
          labelInput="شماره یا ایمیلی که در ایمپو باهاش ثبت نام کردی (اجباری)"
          name="username"
          onChange={(value) => inputHandler(value, "username")}
          placeholder="شماره یا ایمیلی که در ایمپو ثبت نام کردی"
        />
      </div>
      <div className={style.item}>
        <Input
          value={state.paypalUsername}
          type="text"
          labelInput="نام کاربری در pay pal (اجباری)"
          name="paypalUsername"
          onChange={(value) => inputHandler(value, "paypalUsername")}
          placeholder="شماره یا ایمیلی که در pay pal ثبت نام کردی"
        />
      </div>
      <div className={style.item}>
        <Input
          value={state.whatupUsername}
          type="text"
          labelInput="شماره واتساپ"
          name="whatupUsername"
          onChange={(value) => inputHandler(value, "whatupUsername")}
          placeholder="شماره واتساپی که بتونیم باهات در ارتباط باشیم"
        />
      </div>
      <div className={style.item}>
        <Button
          aria-label="btnName"
          size="medium"
          onClick={submit}
          variant="outlined"
          disabled={disableHanlder()}
        >
          ارسال
        </Button>
      </div>
      <DialogBox
        open={isOpen}
        dialogHandler={(e) => {
          setIsOpen(e);
          setState(initialState);
        }}
      />
    </div>
  );
};

export default Form;
