import { useState, useEffect } from 'react';
import { createItem } from "./UniversalCrudHelpers";
import { AtomSpinner } from 'react-epic-spinners';
import { glassmorphic, glassButton, neuromorphicInput2 } from "../../../styles/tailwindStyles";
import {LeumasBaseStyle} from "../../../styles/baseStyles"
import {useAuthUser} from "react-auth-kit"
import React from 'react';

const CreateItem = ({ model, endpoint, propData , token }) => {

  const [createdItem, setCreatedItem] = useState(null);

  const [formData, setFormData] = useState({
    model: model || '',
    endpoint: endpoint || 'LeumasAPI',
    data: propData || {}
  });
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
const auth = useAuthUser();

  useEffect(() => {
    if (!token) {
      // Handle unauthenticated scenario here
      console.log("No token you must login")
    }
  }, [token]);

  const handleChange = (e) => {
    setFormData(prevState => ({ ...prevState, [e.target.name]: e.target.value }));
  }

  const [isVisible, setIsVisible] = useState(true); // New state for visibility control

  const handleCreate = async () => {

    const confirmation = window.confirm("Are you sure you want to create?");

    if (!confirmation) {
      return; // Early return if user clicked on "Cancel"
    }


    setIsLoading(true);
    setError(null);
    setIsVisible(true); // Ensure that the message is visible initially

    try {
      console.log("Sending model:", formData);
      const result = await createItem(`${formData.model}`, formData.endpoint || "LeumasAPI", formData, token);

      setIsLoading(false);
      setCreatedItem(result);
      
      // Set up a timer to hide the messages after 15 seconds
      setTimeout(() => {
        setIsVisible(false);
      }, 15000);
    } catch (error) {
      setIsLoading(false);
      setError("Failed to create the item.");
      console.error("Failed to create the item:", error);

      // Set up a timer to hide the messages after 15 seconds
      setTimeout(() => {
        setIsVisible(false);
      }, 15000);
    }
  };

  
 
  useEffect(() => {
    setFormData(propData);
  }, [propData]);


  return (
    <div className='flex flex-col gap-2'>
      {
        (!model || !endpoint || !propData) && (
          <div className={glassmorphic + " p-4 space-y-4 max-w-xs text-xs"} >
            <input className={neuromorphicInput2} name="model" placeholder="Model" value={formData.model} onChange={handleChange} />
            <input className={neuromorphicInput2} name="endpoint" placeholder="Endpoint" value={formData.endpoint} onChange={handleChange} />
            <textarea className={neuromorphicInput2} name="data" placeholder="Data" value={JSON.stringify(formData.data, null, 2)} disabled />

          </div>
        )
      }
      <button className={`${LeumasBaseStyle} ${glassButton}`} onClick={handleCreate}>Create</button>

      {isLoading && (
        <div className="mt-4 flex justify-center">
          <AtomSpinner color="blue" />
        </div>
      )}
{createdItem && isVisible && (
  <div className={`relative mt-4 bg-green-200 text-green-700 max-w-[150px] min-w-full p-3 rounded-md transition-opacity duration-1000 ease-out ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
    <div className="absolute top-0 right-0 h-2 w-full bg-blue-500 animate-decreaseBorder" style={{ animationDuration: '15s' }}></div>
    <pre>{JSON.stringify(createdItem, null, 2)}</pre>
  </div>
)}

{error && isVisible && (
  <div className={`relative mt-4 bg-red-200 text-red-700 p-3 rounded-md transition-opacity duration-1000 ease-out ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
    <div className="absolute top-0 right-0 h-2 w-full bg-blue-500 animate-decreaseBorder" style={{ animationDuration: '15s' }}></div>
    {error}
  </div>
)}



    </div>
  )
}

export default CreateItem;