import { useState } from 'react';
import { loginFields } from "@/components/auth/InputFields";
import Input from "./Input";
import FormExtra from './FormExtra';
import FormAction from './FormAction';
import axios from 'axios';
import Swal from 'sweetalert2';
import { useRouter } from 'next/router';
import Cookies from 'js-cookie';
import { useSelector } from "react-redux";
import { userActivity } from "@/components/commonFunctions/userActivity";
import { RootState } from "@/Redux/store";

const fields = loginFields;






// Initialize fieldsState with default values for each field
type FieldsState = { [key: string]: string | boolean }; 

interface ErrorResponse {
  response: {
    data: {
      message: string;
      // Other properties if needed
    };
  };
}

let fieldsState: FieldsState = {};
fields.forEach((field) => (fieldsState[field.id] = field.type === 'checkbox' ? false : ''));

export default function Login() {

  const _loggedIn_user = useSelector((state: RootState) => state.user.user);

  const Login = (source:any, userAgent:any) => {
    userActivity(
      _loggedIn_user?._id,
      source,
      "Login",
      {
        pageVisit: `/`,
      },
      userAgent
    );
  };

  const router = useRouter();

  const [loginState, setLoginState] = useState(fieldsState);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setLoginState({ ...loginState, [e.target.id]: value });
    // console.log(e.target.value)
  }

  const handleSubmit = async (e:React.FormEvent) => {
    e.preventDefault();
    try {
      const response = await axios.post('https://api.jazzagain.com/public/index.php/api/auth/adminLogin', {
        email: loginState.email,
        password: loginState.password,
      });
      if(response) {
        // const expirationTime = 4;
        // const now = new Date();
        // now.setTime(now.getTime() + expirationTime * 60 * 60 * 1000);
        const expirationTimeInMonths = 1;
        const now = new Date();
        now.setMonth(now.getMonth() + expirationTimeInMonths);
        Cookies.set("jazz_token", response.data.access_token, { expires: now });
        Cookies.set("jazz_admin_token", response.data.access_token, { expires: now });
        // console.log(response)
        Swal.fire(response.data.message)
        router.push('/admin')
      }
      // Handle the response from the server
    } catch (error) {
      const typedError = error as ErrorResponse;
      Swal.fire(typedError.response?.data.message);
    }

  }

  //handle Login API Integration here
  // let apiKey=""
  // const authenticateUser = ()=>{
  //   const endpoint =`https://api.loginradius.com/identity/v2/auth/login?apikey=${apiKey}`;
  //   fetch(endpoint,
  //     {
  //       method:'POST',
  //       headers:{
  //         'Content-Type':'application/json'
  //       },
  //       body:JSON.stringify(loginFields)
  //     }).then(response=>response.json()).then((data)=>{console.log(data)}).catch(error=>console.log(error))
  // }


  return (
    // <form className="mt-8 space-y-6">
    <div className="mt-8 space-y-6">
      <div className="-space-y-px">
        {fields.map((field) => (
          <Input
            key={field.id}
            handleChange={handleChange}
            value={loginState[field.id]}
            labelText={field.labelText}
            labelFor={field.labelFor}
            id={field.id}
            name={field.name}
            type={field.type}
            isRequired={field.isRequired}
            placeholder={field.placeholder}
          />
        ))}
      </div>

      {/* <FormExtra /> */}
      <FormAction handleSubmit={handleSubmit} text="Login"  onClick={Login} />
      </div>
    // </form>
  );
}