import React, { useEffect, useState } from "react";
import { useNavigate, Link } 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 = 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

    if (email == '' && password == '' && first_name == '') {
      setMsgError('Please fill in fields')
    }

    try {
      if (email !== '' && password !== '' && first_name !== '' && last_name !== '') {
        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)
        setSignUpLoading(true)

        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.status > 0 && data.internal_return == 100 && data.session != '') {
            localStorage.setItem("email", `${data.email}`);
            localStorage.setItem("country", `${data.country}`);
            localStorage.setItem("firstname", `${data.firstname}`);
            localStorage.setItem("lastname", `${data.lastname}`);

            setTimeout(() => {
              navigate("/", { replace: true });
              setSignUpLoading(false)
            }, 2000)
          } else {
            setMsgError(data.status)
            setSignUpLoading(false)
          }
        }
      } else {
        setMsgError('This account does not exist')
        setSignUpLoading(false)
      }
    } catch (error) {
      throw new Error(error)
      setMsgError('An error occurred')
    } 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" style={{
                        fontSize: 'calc(1rem + .6vw)'
                      }}>
                        Create Account
                      </h1>
                      <span className="text-gray-400 font-medium text-xl">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-[1.15rem] 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
                            placeholder="Firstname"
                            label="First Name"
                            name="first_name"
                            type="text"
                            value={formData.first_name}
                            inputHandler={handleInputChange}
                          />
                        </div>
                        <div className="input-item flex-1">
                          <InputCom
                            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
                          placeholder="support@mermsemr.com"
                          label="Email"
                          name="email"
                          type="email"
                          value={formData.email}
                          inputHandler={handleInputChange}
                        />
                      </div>
                      <div className="input-item mb-5">
                        <InputCom
                          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="text-base cursor-default text-dark-gray dark:text-white"
                          >
                            I agree with all
                            <a
                              href="#"
                              className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
                            >
                              terms and condition
                            </a>
                          </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-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] ${signUpLoading ? "active" : ""
                              }`}
                          >
                            {signUpLoading ? (
                              <div className="signup btn-loader"></div>
                            ) : (
                              <span>Sign Up</span>
                            )}
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </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-base 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>
  )
}