import React from "react";
import { TextField, Button, InputAdornment, Typography } from "@mui/material";
import { useFormik } from "formik";
import * as Yup from "yup";
import { Grid } from "../../../../components/grid/Grid";
import Num2persian from "num2persian";
import { SlaughterPayFeesGateway } from "../../../slaughter-house/components/slaughter-pay-fees-gateway/SlaughterPayFeesGateway";
import { useDispatch } from "react-redux";
import { CLOSE_MODAL, OPEN_MODAL } from "../../../../lib/redux/slices/appSlice";

export const ProvincePaymentPayDept = () => {
  const validationSchema = Yup.object({
    paymentAmount: Yup.number()
      .required("مبلغ اجباری است")
      .positive("یک عدد مثبت وارد کنید!")
      .min(200000, "حداقل مبلغ دویست هزار ریال است!"),
    // .max(
    //   2000000000,
    //   "در هر بار پرداخت، حداکثر مبلغ 200 میلیون تومان میتوانید پرداخت کنید!"
    // ),
  });

  const dispatch = useDispatch();

  // Initialize Formik
  const formik = useFormik({
    initialValues: {
      paymentAmount: "",
    },
    validationSchema,
    onSubmit: (values) => {
      dispatch(CLOSE_MODAL());
      dispatch(
        OPEN_MODAL({
          title: "واریز بدهی از طریق درگاه پرداخت",
          content: (
            <SlaughterPayFeesGateway
              // amount={
              //   formik.values.paymentAmount > 1999937500
              //     ? 1999937500
              //     : parseInt(formik.values.paymentAmount)
              // }
              amount={formik.values.paymentAmount}
              isZarinPal
            />
          ),
        })
      );
    },
  });
  //   const getValueWIthTax = (value) => {
  //     return Number(value / 10) + Number(value);
  //   };

  return (
    <Grid>
      <form onSubmit={formik.handleSubmit}>
        <Grid
          container
          xs={12}
          justifyContent="center"
          alignItems="center"
          gap={1}
        >
          <Grid
            style={{ width: "500px" }}
            container
            xs={12}
            alignItems="center"
            justifyContent="space-between"
          >
            <TextField
              id="paymentAmount"
              name="paymentAmount"
              label="مبلغ"
              value={formik.values.paymentAmount}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              error={
                formik.touched.paymentAmount &&
                Boolean(formik.errors.paymentAmount)
              }
              helperText={
                formik.touched.paymentAmount && formik.errors.paymentAmount
              }
              fullWidth
              margin="normal"
              variant="outlined"
              endAdornment={
                <InputAdornment position="end">ریال</InputAdornment>
              }
            />
          </Grid>
          <Grid container xs={12}>
            <Grid item xs={12}>
              {formik.values.paymentAmount > 0 ? (
                <Typography variant="body1" mb={2} sx={{ color: "darkcyan" }}>
                  {Num2persian(formik.values.paymentAmount)} ریال
                </Typography>
              ) : (
                <Typography variant="body1" mb={2} sx={{ color: "darkcyan" }}>
                  مبلغ را وارد کنید
                </Typography>
              )}
            </Grid>
            {/* <Grid item xs={12}>
              {formik.values.paymentAmount > 0 && (
                <Typography variant="body1" mb={2} sx={{ color: "red" }}>
                  با احتساب ده درصد ارزش افزوده:{" "}
                  {getValueWIthTax(
                    formik.values.paymentAmount
                  ).toLocaleString()}{" "}
                  ریال
                </Typography>
              )}
            </Grid> */}
          </Grid>
          <Grid xs={12}>
            <Button color="primary" variant="contained" type="submit" fullWidth>
              پرداخت
            </Button>
          </Grid>
        </Grid>
      </form>
    </Grid>
  );
};
