import React, { useState } from "react";
import {
  TextField,
  Button,
  Card,
  FormControl,
  Grid,
  FormHelperText,
  OutlinedInput,
  Box,
} from "@mui/material";
import { useNavigate } from "react-router-dom";
import toast from "react-hot-toast";
import axios from "axios"; // Import axios for making HTTP requests
import { isAutheticated } from "src/auth";
const styles = {
  formStyle: {
    fontWeight: "700",
    fontSize: "12px",
    fontFamily: "inter",
    marginBottom: "3px",
    marginLeft: "0",
  },
};
const AddCustomer = () => {
  const navigate = useNavigate();
  const [user, setUser] = useState({
    name: "",
    email: "",
    password: "", // No need to initialize password here
  });
  const [id, setUserId] = useState("");
  const token = isAutheticated();

  const [loading, setLoading] = useState(false);
  const [data, setData] = useState({
    first_Name: "",
    last_Name: "",
    phone_Number: Number,
    street: "",
    city: "",
    state: "",
    postalCode: "",
    country: "",
  });

  // console.log(data);
  const handleChange = (e) => {
    setData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handerInputChanges = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };
  function handleAddressSubmit(e) {
    e.preventDefault();
    if (
      data.first_Name === "" ||
      data.last_Name === "" ||
      data.phone_Number === null ||
      data.street === "" ||
      data.city === "" ||
      data.state === "" ||
      data.postalCode === "" ||
      data.country === ""
    ) {
      swal({
        title: "Warning",
        text: "Please fill All mendetory fields ",
        icon: "warning",
        button: "ok",
        dangerMode: true,
      });
      return;
    }
    setLoading(true);
    axios
      .post(
        `/api/shipping/address/admin/new/${id}`,
        {
          ...data,
        },

        {
          headers: {
            "Access-Control-Allow-Origin": "*",
            Authorization: `Bearer ${token}`,
          },
        }
      )
      .then((res) => {
        setLoading(false);
        // setSuccess((prev) => !prev);
        navigate("/customers-details");
        toast.success(res.data.message ? res.data.message : "Address Added!");
      })
      .catch((error) => {
        setLoading(false);
        toast.error(
          error.response.data.message
            ? error.response.data.message
            : "Something went wrong!"
        );
      });
  }

  // Generate password function
  const generatePassword = (name, email) => {
    const combinedStr = (name + email).toLowerCase(); // Convert to lowercase for consistency
    const specialChars = "@#*"; // Define the set of special characters
    const alphaChars = combinedStr.match(/[a-zA-Z]/g); // Filter out alphabetic characters
    const filteredChars = combinedStr.match(/[^\W_]/g); // Filter out non-alphanumeric characters
    let passwordChars = alphaChars.concat(filteredChars); // Combine alphabetic and filtered characters

    // Insert a random special character at a random position in the password characters array
    const specialChar = specialChars.charAt(
      Math.floor(Math.random() * specialChars.length)
    ); // Pick a random special character
    const randomIndex = Math.floor(Math.random() * (passwordChars.length + 1)); // Pick a random position to insert the special character
    passwordChars.splice(randomIndex, 0, specialChar); // Insert the special character at the random position

    passwordChars = passwordChars.sort(() => Math.random() - 0.5); // Shuffle the characters
    const password = passwordChars.join("").slice(0, 8); // Take the first 8 characters
    return password;
  };
  const handleFormSubmit = async (e) => {
    e.preventDefault();
    try {
      if (!user.name || !user.email) {
        throw new Error("Fill all fields!");
      }

      // Generate password based on name and email
      const generatedPassword = generatePassword(user.name, user.email);
      console.log(generatedPassword); // Use generatedPassword instead of generatePassword
      setUser({ ...user, password: generatedPassword }); // Set generated password to user state

      const response = await axios.post("/api/v1/user/register", {
        ...user, // Send user details
        password: generatedPassword, // Send generated password to the backend
      });
      if (response.status === 201) {
        toast.success("User Added Successful");
        setUserId(response.data.userId);
      }
    } catch (error) {
      console.log(error.response.data.message);
      toast.error(error.response.data.message);
    }
  };

  console.log(user);
  console.log("this is the id ", id);

  return (
    <div>
      <Card sx={{ padding: "1rem", marginBottom: "1rem" }}>
        <form style={{ marginBottom: "2rem" }} onSubmit={handleFormSubmit}>
          <TextField
            id="name"
            required
            type="text"
            sx={{ marginBottom: "2rem", width: "50%" }}
            name="name"
            value={user.name}
            label="Name"
            variant="outlined"
            onChange={handerInputChanges}
          />
          <br />
          <TextField
            id="email"
            type="email"
            sx={{ mb: "2rem", width: "50%" }}
            required
            name="email"
            value={user.email}
            label="Email"
            variant="outlined"
            onChange={handerInputChanges}
          />
          <br />

          <Button variant="contained" disabled={id?.length > 0} type="submit">
            Add user
          </Button>
          <br />
        </form>

        <form onSubmit={handleAddressSubmit}>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <Grid container spacing={2}>
                <Grid item xs={6}>
                  <FormControl variant="outlined" fullWidth>
                    <FormHelperText
                      id="outlined-weight-helper-text"
                      sx={styles.formStyle}
                    >
                      FIRST NAME*
                    </FormHelperText>
                    <OutlinedInput
                      size="small"
                      id="outlined-adornment-weight"
                      placeholder="First name"
                      aria-describedby="outlined-weight-helper-text"
                      name="first_Name"
                      required
                      type="text"
                      onChange={(e) => handleChange(e)}

                      //   value={accountDetails.firstname}
                      //   onChange={handerInputChanges}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={6}>
                  <FormControl variant="outlined" fullWidth>
                    <FormHelperText
                      id="outlined-weight-helper-text"
                      sx={styles.formStyle}
                    >
                      LAST NAME*
                    </FormHelperText>
                    <OutlinedInput
                      size="small"
                      id="outlined-adornment-weight"
                      placeholder="Last name"
                      aria-describedby="outlined-weight-helper-text"
                      name="last_Name"
                      required
                      type="text"
                      onChange={(e) => handleChange(e)}
                      //   value={accountDetails.firstname}
                      //   onChange={handerInputChanges}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={12}>
                  <FormControl fullWidth variant="outlined">
                    <FormHelperText
                      id="outlined-weight-helper-text"
                      sx={styles.formStyle}
                    >
                      PHONE NUMBER*
                    </FormHelperText>
                    <OutlinedInput
                      size="small"
                      id="outlined-adornment-weight"
                      placeholder="Phone name"
                      aria-describedby="outlined-weight-helper-text"
                      name="phone_Number"
                      required
                      type="number"
                      onChange={(e) => handleChange(e)}
                      //   value={accountDetails.firstname}
                      //   onChange={handerInputChanges}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={12}>
                  <FormControl variant="outlined" fullWidth>
                    <FormHelperText
                      id="outlined-weight-helper-text"
                      sx={styles.formStyle}
                    >
                      STREET ADDRESS*
                    </FormHelperText>
                    <OutlinedInput
                      size="small"
                      id="outlined-adornment-weight"
                      placeholder="Street Address"
                      aria-describedby="outlined-weight-helper-text"
                      name="street"
                      required
                      type="text"
                      onChange={(e) => handleChange(e)}
                      //   value={accountDetails.firstname}
                      //   onChange={handerInputChanges}
                    />
                  </FormControl>
                </Grid>
              </Grid>
            </Grid>
            <Grid item xs={12}>
              <FormControl variant="outlined" fullWidth>
                <FormHelperText
                  id="outlined-weight-helper-text"
                  sx={styles.formStyle}
                >
                  COUNTRY*
                </FormHelperText>
                <OutlinedInput
                  size="small"
                  id="outlined-adornment-weight"
                  placeholder="Country"
                  aria-describedby="outlined-weight-helper-text"
                  name="country"
                  required
                  type="text"
                  onChange={(e) => handleChange(e)}
                  //   value={accountDetails.firstname}
                  //   onChange={handerInputChanges}
                />
              </FormControl>
            </Grid>
            <Grid item xs={12}>
              <FormControl fullWidth variant="outlined">
                <FormHelperText
                  id="outlined-weight-helper-text"
                  sx={styles.formStyle}
                >
                  TOWN CITY*
                </FormHelperText>
                <OutlinedInput
                  size="small"
                  id="outlined-adornment-weight"
                  placeholder="Town City"
                  aria-describedby="outlined-weight-helper-text"
                  name="city"
                  required
                  type="text"
                  onChange={(e) => handleChange(e)}
                  //   value={accountDetails.firstname}
                  //   onChange={handerInputChanges}
                />
              </FormControl>
            </Grid>
            <Grid item xs={12}>
              <Grid container spacing={2}>
                <Grid item xs={6}>
                  <FormControl variant="outlined" fullWidth>
                    <FormHelperText
                      id="outlined-weight-helper-text"
                      sx={styles.formStyle}
                    >
                      STATE*
                    </FormHelperText>
                    <OutlinedInput
                      size="small"
                      id="outlined-adornment-weight"
                      placeholder="State"
                      aria-describedby="outlined-weight-helper-text"
                      name="state"
                      required
                      type="text"
                      onChange={(e) => handleChange(e)}
                      //   value={accountDetails.firstname}
                      //   onChange={handerInputChanges}
                    />
                  </FormControl>
                </Grid>

                <Grid item xs={6}>
                  <FormControl variant="outlined" fullWidth>
                    <FormHelperText
                      id="outlined-weight-helper-text"
                      sx={styles.formStyle}
                    >
                      ZIP CODE*
                    </FormHelperText>
                    <OutlinedInput
                      size="small"
                      id="outlined-adornment-weight"
                      placeholder="Zip Code"
                      aria-describedby="outlined-weight-helper-text"
                      name="postalCode"
                      required
                      type="number"
                      onChange={(e) => handleChange(e)}
                      //   value={accountDetails.firstname}
                      //   onChange={handerInputChanges}
                    />
                  </FormControl>
                </Grid>
                <Grid item xs={12}>
                  <Button
                    variant="contained"
                    disabled={id?.length == 0}
                    type="submit"
                    onClick={handleAddressSubmit}
                  >
                    Add address
                  </Button>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </form>
      </Card>
    </div>
  );
};

export default AddCustomer;