import { useState, useContext } from 'react';
import { AccountUserProfileContext } from '../hooks';

// import { KeenIcon } from '@/components';
// import { toAbsoluteUrl } from '@/utils/Assets';
import { getAuth, useAuthContext } from '@/auth';
import { toast } from 'sonner';

interface IBasicSettingsProps {
  title: string;
}

const BasicSettings = () => {
  // const user = localStorage.getItem('user');
  // const parsedUser = user ? JSON.parse(user) : null;
  const parsedUser = getAuth()?.user;
  // console.log('parsedUser :', parsedUser);
  const [newUsername, setNewUsername] = useState<string>(parsedUser?.username || '');
  const [newEmail, setNewEmail] = useState<string>(parsedUser?.email || '');
  const [newName, setNewName] = useState<string>(parsedUser?.name || '');

  const { setProfile } = useContext(AccountUserProfileContext);

  const [isSubmitting, setIsSubmitting] = useState(false);

  const isChanged =
    newUsername !== parsedUser?.username ||
    newEmail !== parsedUser?.email ||
    newName !== parsedUser?.name;

  const handleChangeProfile = async () => {
    setIsSubmitting(true);
    try {
      await setProfile({ name: newName, username: newUsername, email: newEmail });

      const newCache = {
        name: newName,
        email: newEmail,
        username: newUsername
      };

      localStorage.setItem('user', JSON.stringify(newCache));
    } catch (error: any) {
      const errorMessage =
        error?.response?.data?.message ||
        error?.message ||
        'An error occurred while resetting the password.';
      toast.error(errorMessage);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="card pb-2.5">
      <div className="card-header" id="general_settings">
        <h3 className="card-title">Account</h3>
      </div>

      <div className="card-body grid gap-5">
        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
          <label className="form-label max-w-56">Name</label>
          <input
            className="input"
            type="text"
            value={newName}
            onChange={(e) => setNewName(e.target.value)}
            disabled={isSubmitting}
          />
        </div>
        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
          <label className="form-label max-w-56">Username</label>
          <input
            className="input"
            type="text"
            value={newUsername}
            onChange={(e) => setNewUsername(e.target.value)}
            disabled={isSubmitting}
          />
        </div>

        <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
          <label className="form-label max-w-56">Email</label>
          <input
            className="input"
            type="email"
            value={newEmail}
            onChange={(e) => setNewEmail(e.target.value)}
            disabled={isSubmitting}
          />
        </div>
        {/* <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
          <label className="form-label max-w-56">Name</label>
          <input className="input" type="text" value={parsedUser?.name} />
        </div> */}
        <div className="flex justify-end">
          <button
            className="btn btn-primary"
            onClick={handleChangeProfile}
            disabled={isSubmitting || !isChanged}
          >
            {isSubmitting ? 'loading...' : 'Save Change'}
          </button>
        </div>
      </div>
    </div>
  );
};

export { BasicSettings, type IBasicSettingsProps };