import { CardEmbedMetadata } from '../models/CardEmbedMetadata';
import { useCallback, useEffect, useState } from 'react';
import { useLatest } from './useLatest';

export type UseFetchCardMetadataResult = {
  /**
   * The embed metadata for the card.
   */
  data?: CardEmbedMetadata;

  /**
   * Whether the embed metadata is loading.
   */
  isLoading: boolean;

  /**
   * Whether the embed metadata query failed.
   */
  isError: boolean;

  /**
   * Whether the embed metadata query succeeded.
   */
  isSuccess: boolean;

  /**
   * Refetch the embed metadata query.
   */
  refetchAsync: () => Promise<void>;
};

export type UseFetchCardMetadataOptions = {
  /**
   * The url of the embed metadata for the card, copied from the Komo Portal.
   */
  embedMetaUrl: string;

  /**
   * Whether the embed metadata query is enabled. Defaults to true.
   */
  isEnabled?: boolean;

  /**
   * The callback for when an error occurs during querying the embed metadata endpoint.
   */
  onError?: (e: any) => void;
};

type QueryStatus = 'loading' | 'success' | 'error';

export const useFetchCardMetadata = ({
  embedMetaUrl,
  isEnabled = true,
  onError,
}: UseFetchCardMetadataOptions): UseFetchCardMetadataResult => {
  const [status, setStatus] = useState<QueryStatus>('loading');
  const [data, setData] = useState<CardEmbedMetadata>();
  const handleError = useLatest(onError);

  const getEmbedDataAsync = useCallback(async () => {
    try {
      setStatus('loading');
      const response = await fetch(embedMetaUrl);
      const json = await response.json();
      setData(json as CardEmbedMetadata);
      setStatus('success');
    } catch (e) {
      setStatus('error');
      handleError.current?.(e);
    }
  }, [embedMetaUrl, handleError]);

  useEffect(() => {
    if (isEnabled) {
      getEmbedDataAsync();
    }
  }, [isEnabled, getEmbedDataAsync]);

  return {
    data,
    isLoading: status === 'loading',
    isError: status === 'error',
    isSuccess: status === 'success',
    refetchAsync: getEmbedDataAsync,
  };
};