import {Props, userSectionType} from '..';
import useEditProfile from '../../edit-profile/hooks/use-edit-profile';
import {ImageProfile} from '../../edit-profile';
import {useState} from 'react';

function useUserModal(
  name: string,
  currentImageProfile: ImageProfile,
  imagesToSelect: ImageProfile[],
  onSaveProfile: (image: ImageProfile | undefined) => void,
  onLogout: () => void,
  onManageMySubscription: () => void,
): {userModal: Props; open: () => void} {
  const [isOpen, setIsOpen] = useState(false);
  const [isEditingProfile, setIsEditingProfile] = useState(false);
  const [sectionSelected, setSectionSelected] = useState<userSectionType>(
    'info',
  );
  const {editProfile, clearState} = useEditProfile(
    currentImageProfile,
    imagesToSelect,
    name,
    onCancel,
    onSaveProfile,
  );

  function onClose() {
    setIsEditingProfile(false);
    setIsOpen(false);
  }

  function onCancel() {
    setIsEditingProfile(false);
    clearState();
  }
  function onEditProfile() {
    setIsEditingProfile(true);
  }

  function onSelectSection(section: userSectionType) {
    setSectionSelected(section);
  }

  function open() {
    setIsOpen(true);
  }

  return {
    open,
    userModal: {
      editProfileProps: editProfile,
      imgUrl: currentImageProfile.imageUrl,
      isEditingProfile,
      name,
      onClose,
      onEditProfile,
      onLogout,
      onManageMySubscription,
      onSelectSection,
      sectionSelected,
      visible: isOpen,
    },
  };
}

export default useUserModal;