import { useMemo } from 'react';
import { FallbackProps } from 'react-error-boundary';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';

import { Dialog, DialogProps } from '@/shared/ui/dialogs/dialog';

type CommonErrorProps = FallbackProps & {
  height?: number;
};
export const APIError = ({ 
  error, 
  resetErrorBoundary 
}: CommonErrorProps) => {
  console.log('APIError --> ', error);
  
  const { navigateBack } = useNavigate();
  const msg = useMemo(() => {
    let message: Partial<DialogProps> = {
      title: '일시적인 오류가 발생하였습니다.',
      message: '잠시 후 다시 시도해주세요.',
    };
    if(error?.response?.data?.message){
      message = { message: error.response.data.message };
    }
    return message;
  }, [error]);

  const handleCancel = () => {
    navigateBack();
    resetErrorBoundary();
  };

  return (
    <Dialog
      afterLeave={ () => null }
      open={ true }
      onClose={ () => null }
      onConfirmClick={ resetErrorBoundary }
      onCancelClick={ handleCancel }
      message={ msg.message }
      buttonLabel={ ['취소', '재시도'] }
    />
  );
};
