'use client';
import React from 'react';
import { useState } from 'react';

//styles
import s from './ProfilePage.module.scss';

// components
import Modal from '@/components/modals/Modal/Modal';
import ProfileEditable from '@/components/ProfileEditable';
import ProfileInfoModal from '@/components/modals/ProfileInfoModal';
import Title from '@/components/Title';
import ProfileCardContainer from '@/components/ProfileCardContainer';

const User = {
  name: 'Bruno',
  surname: 'Delic',
  email: 'brunodelic@gmail.com',
  mobileNum: '0958216594',
  country: 'Croatia',
};

const UserInfo = {
  NAME: 'Name',
  SURNAME: 'Surname',
  EMAIL: 'Email',
  MOBILE: 'Mobile number',
  COUNTRY: 'Country',
};

/*useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await axios.get('/api/user'); // Replace with your actual API endpoint
        setUser(response.data);
      } catch (error) {
        console.error('Error fetching user data:', error);
      }
    };

    fetchUserData();
  }, []);*/

// ... (previous imports)

const ProfilePage = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [user, setUser] = useState(User);
  const [editableValue, setEditableValue] = useState('');
  const [editedEnumValue, setEditedEnumValue] = useState('');

  const toggleModal = (enumValue: string, value: string) => {
    setEditableValue(value);
    setEditedEnumValue(enumValue);
    setIsOpen(!isOpen);
  };

  const handleSave = (editedValue: string) => {
    setUser((prevUser) => {
      switch (editedEnumValue) {
        case UserInfo.NAME:
          return { ...prevUser, name: editedValue as string };
        case UserInfo.SURNAME:
          return { ...prevUser, surname: editedValue as string };
        case UserInfo.MOBILE:
          return { ...prevUser, mobileNum: editedValue as string };
        case UserInfo.EMAIL:
          return { ...prevUser, email: editedValue as string };
        case UserInfo.COUNTRY:
          return { ...prevUser, country: editedValue as string };
        default:
          return prevUser;
      }
    });
    setIsOpen(false);
  };

  return (
    <>
      <div className={s.container}>
        <h2 className={s.title}>
          {user.name} {user.surname}
        </h2>

        <ProfileEditable
          toggle={(enumValue, value) => toggleModal(enumValue, value)}
          enumValue={UserInfo.NAME}
          value={user.name}
        />
        <ProfileEditable
          toggle={(enumValue, value) => toggleModal(enumValue, value)}
          enumValue={UserInfo.SURNAME}
          value={user.surname}
        />

        <ProfileEditable
          toggle={(enumValue, value) => toggleModal(enumValue, value)}
          enumValue={UserInfo.MOBILE}
          value={user.mobileNum}
        />
        <ProfileEditable
          toggle={(enumValue, value) => toggleModal(enumValue, value)}
          enumValue={UserInfo.EMAIL}
          value={user.email}
        />
        <ProfileEditable
          toggle={toggleModal}
          enumValue={UserInfo.COUNTRY}
          value={user.country}
        />
      </div>
      <Title text="Prethodne rezervacije" />
      <ProfileCardContainer />

      <Modal isOpen={isOpen} toggleModal={() => setIsOpen(!isOpen)}>
        <ProfileInfoModal
          enumValue={editedEnumValue}
          editableValue={editableValue}
          setEditableValue={setEditableValue}
          onSave={() => handleSave(editableValue)}
        />
      </Modal>
    </>
  );
};

export default ProfilePage;