import * as React from "react";
import { useState } from "react";
import { EditProfileProps, ImageProfile } from "..";
import { useProfileProvider } from "../../../providers/profile-provider";

function useEditProfile(
  currentImage: ImageProfile,
  images: ImageProfile[],
  name: string,
  onCancel: () => void,
  onSubmitBase: (imageSelected: ImageProfile | undefined) => void
): { editProfile: EditProfileProps; clearState: () => void } {
  const [imageSelected, setImageSelected] = useState<ImageProfile | undefined>(
    undefined
  );

  const { updateProfileImage } = useProfileProvider();

  function onSubmit(imageSelected: ImageProfile | undefined) {
    updateProfileImage(imageSelected);
    onCancel();
  }
  function onImageSelect(image: ImageProfile) {
    setImageSelected(image);
  }
  function onChangeImage() {
    setImageSelected(undefined);
  }

  function clearState() {
    setImageSelected(undefined);
  }

  return {
    clearState,
    editProfile: {
      currentImage,
      imageSelected,
      images,
      name,
      onCancel,
      onImageSelect,
      onChangeImage,
      onSubmit: () => onSubmit(imageSelected),
    },
  };
}

export default useEditProfile;