import React, { useCallback, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import facebookLogo from "../../../assets/images/facebook-4.svg";
import WrenchBoard from "../../../assets/images/wrenchboard.png";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";

export default function SignUp() {
  const [signUpLoading, setSignUpLoading] = useState(false);
  const [checked, setValue] = useState(false);
  // for the catch error
  const [msgError, setMsgError] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [countries, setCountries] = useState([]);

  const [formData, setFormData] = useState({
    country: "",
    first_name: "",
    last_name: "",
    email: "",
    password: "",
  });

  const handleInputChange = (event) => {
    const { name, value } = event?.target;
    setFormData({ ...formData, [name]: value });
  };

  // To Show and Hide Password
  const togglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };

  const rememberMe = () => {
    setValue(!checked);
  };

  const navigate = useNavigate();
  const userApi = new usersService();

  // Get Country Api
  const getCountryList = useCallback(async () => {
    const res = await userApi.getSignupCountryData();

    try {
      if (res.status === 200) {
        const { signup_country } = await res.data;
        setCountries(signup_country);
      } else if (res.data.result !== 100) {
        setCountries("Nothing see here!");
      }
    } catch (error) {
      throw new Error(error);
    }
  }, []);

  const handleSignUp = async () => {
    let { country, first_name, last_name, email, password } = formData;
    try {
      if (
        email !== "" &&
        password !== "" &&
        first_name !== "" &&
        last_name !== "" &&
        country !== ""
      ) {
        setSignUpLoading(true);
        const reqData = {
          country: country,
          firstname: first_name,
          lastname: last_name,
          email: email,
          username: email,
          password: password,
          terms: 1,
          news: 1,
        };

        const res = await userApi.CreateUser(reqData);

        if (res.status === 200) {
          const { data } = res;
          if (data.status === -1 && data.acc === "DULPICATE") {
            setMsgError("This account has been already created");
            setSignUpLoading(false);
          }
          if (data && data.status === "1") {
            setTimeout(() => {
              navigate("/outmessage", { replace: true });
              setSignUpLoading(false);
            }, 2000);
          }
        } else {
          setSignUpLoading(false);
          setMsgError("An error occurred");
        }
      } else {
        setMsgError("Please fill in fields");
      }
    } catch (error) {
      throw new Error(error);
    } finally {
      setTimeout(() => {
        setMsgError(null);
      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
    }
  };

  useEffect(() => {
    getCountryList();
  });

  return (
    <>
      <div className="layout-wrapper login">
        <div className="main-wrapper w-full xl:h-screen h-full xl:py-10 py-12 overflow-y-auto">
          <div className=" h-full">
            <div className="flex-1 flex justify-center items-center">
              <div className="w-full">
                <div className="mb-12">
                  <Link to="#">
                    <img
                      src={WrenchBoard}
                      alt="wrenchboard"
                      className="h-10 mx-auto"
                    />
                  </Link>
                </div>
                <div className="content-wrapper login shadow-md w-full lg:max-w-[600px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5 mb-7">
                  <div>
                    <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                        Create Account
                      </h1>
                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
                        Already have an account?{" "}
                        <Link
                          to="/login"
                          className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
                        >
                          Sign in here
                        </Link>
                      </span>
                    </div>
                    <button
                      type="button"
                      className={`rounded-[0.475rem] w-full mb-6 text-[15px] h-[42px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem]`}
                    >
                      <img
                        className="mr-3 h-6"
                        src={facebookLogo}
                        alt="logo-icon(s)"
                      />
                      Sign in with Facebook
                    </button>
                    <div className="w-full flex items-center gap-2">
                      <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
                      <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
                        OR
                      </span>
                      <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
                    </div>
                    <div className="input-area">
                      <SelectOption
                        label="Country"
                        data={countries}
                        name="country"
                        value={formData.country}
                        inputHandler={handleInputChange}
                      />
                      <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
                        <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
                          <InputCom
                            fieldClass="px-6"
                            placeholder="Firstname"
                            label="First Name"
                            name="first_name"
                            type="text"
                            value={formData.first_name}
                            inputHandler={handleInputChange}
                          />
                        </div>
                        <div className="input-item flex-1">
                          <InputCom
                            fieldClass="px-6"
                            placeholder="Lastname"
                            label="Last Name"
                            name="last_name"
                            type="text"
                            value={formData.last_name}
                            inputHandler={handleInputChange}
                          />
                        </div>
                      </div>
                      <div className="input-item mb-5">
                        <InputCom
                          fieldClass="px-6"
                          placeholder="support@mermsemr.com"
                          label="Email"
                          name="email"
                          type="email"
                          value={formData.email}
                          inputHandler={handleInputChange}
                        />
                      </div>
                      <div className="input-item mb-5">
                        <InputCom
                          fieldClass="px-6"
                          placeholder="● ● ● ● ● ●"
                          label="Password"
                          name="password"
                          type={showPassword ? "text" : "password"}
                          onClick={togglePasswordVisibility}
                          passIcon={
                            showPassword ? "show-password" : "hide-password"
                          }
                          value={formData.password}
                          inputHandler={handleInputChange}
                        />
                      </div>
                      {msgError && (
                        <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
                          {msgError}
                        </div>
                      )}
                      <div className="forgot-password-area flex justify-between items-center mb-6">
                        <div className="remember-checkbox flex items-center space-x-2.5">
                          <button
                            onClick={rememberMe}
                            type="button"
                            className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
                          >
                            {checked && (
                              <svg
                                xmlns="http://www.w3.org/2000/svg"
                                className="h-5 w-5"
                                viewBox="0 0 20 20"
                                fill="currentColor"
                              >
                                <path
                                  fillRule="evenodd"
                                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                  clipRule="evenodd"
                                />
                              </svg>
                            )}
                          </button>
                          <span
                            onClick={rememberMe}
                            className="cursor-default text-dark-gray dark:text-white text-[15px]"
                          >
                            I agree with all
                            <Link
                              href="#"
                              className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
                            >
                              terms and condition
                            </Link>
                          </span>
                        </div>
                      </div>
                      <div className="signin-area mb-1">
                        <div className="flex justify-center">
                          <button
                            type="button"
                            onClick={handleSignUp}
                            className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
                          >
                            {signUpLoading ? (
                              <div className="signup btn-loader"></div>
                            ) : (
                              <span>Sign Up</span>
                            )}
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="flex-1 flex justify-center items-center p-10">
              <div className="flex items-center">
                <a
                  href="https://www.wrenchboard.com/about-us"
                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
                  target="_blank"
                  rel="noreferrer"
                >
                  About
                </a>
                <a
                  href="https://www.wrenchboard.com/service"
                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
                  target="_blank"
                  rel="noreferrer"
                >
                  Services
                </a>
                <a
                  href="https://www.wrenchboard.com/contact"
                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
                  target="_blank"
                  rel="noreferrer"
                >
                  Contact Us
                </a>
              </div>
            </div>
            <div className="flex-1 flex justify-center items-center p-10">
              <p className="text-black text-[15px] px-2 font-medium flex items-center">
                <span className="text-3xl mt-2 mr-1">©</span> 2023 -{" "}
                <Link to="/" className="text-[#009ef7] ml-1">
                  WrenchBoard
                </Link>{" "}
              </p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

const SelectOption = ({
  label,
  name,
  inputHandler,
  value,
  data, // passing the data from parent
}) => {
  return (
    <div className="input-com mb-7">
      <div className="flex items-center justify-between">
        <label
          className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
          htmlFor={name}
        >
          {label}
        </label>
      </div>
      <div>
        <select
          name={name}
          id={name}
          className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
          onChange={inputHandler}
          value={value}
        >
          <option value={""}>Select your Country</option>
          {data?.length > 0 &&
            data?.map((item, idx) => (
              <option value={item[0]} key={idx}>
                {item[1]}
              </option>
            ))}
        </select>
      </div>
    </div>
  );
};