import { useEffect, useState } from 'react';
import axios from 'axios';

type FlagName = 'classes_v1';

interface FeatureFlags {
  classes_v1?: boolean;
}

let cache: FeatureFlags | null = null;
let inflight: Promise<FeatureFlags> | null = null;

const fetchFlags = (): Promise<FeatureFlags> => {
  if (cache !== null) {
    return Promise.resolve(cache);
  }
  if (inflight !== null) {
    return inflight;
  }
  inflight = axios
    .get('/zeiterfassung/feature-flags')
    .then((response) => {
      const data: FeatureFlags = response.data || {};
      cache = data;
      inflight = null;
      return data;
    })
    .catch((error) => {
      inflight = null;
      throw error;
    });
  return inflight;
};

export interface UseFeatureFlagReturn {
  enabled: boolean;
  loading: boolean;
}

export function useFeatureFlag(flag: FlagName): UseFeatureFlagReturn {
  const [enabled, setEnabled] = useState<boolean>(() => {
    if (cache && typeof cache[flag] === 'boolean') {
      return cache[flag] as boolean;
    }
    return false;
  });
  const [loading, setLoading] = useState<boolean>(() => cache === null);

  useEffect(() => {
    let cancelled: boolean = false;
    fetchFlags()
      .then((flags) => {
        if (cancelled) return;
        setEnabled(Boolean(flags[flag]));
        setLoading(false);
      })
      .catch(() => {
        if (cancelled) return;
        setEnabled(false);
        setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [flag]);

  return { enabled, loading };
}

export default useFeatureFlag;