import { useState } from 'react';

import { useContentCatalogPayload } from '@/business/content-catalog/hooks';
import { toggleEsaFaq } from '@/business/esa-funding/selectors';
import type { EsaFundingPage } from '@/business/esa-funding/types';
import { CONTENT_CATALOG_TYPES } from '@/shared/constants/contentCatalog';
import { ESA_FUNDING_FAQS } from '@/shared/constants/esaFunding';
import type { EsaFundingContent } from '@/shared/types/esaFunding';

export const EMPTY_ESA_FUNDING_CONTENT: EsaFundingContent = {
  approvedUses: [],
  keyPoints: [],
  stateChecklist: [],
  schoolImpactItems: [],
  staffRoleItems: [],
  parentConversationScript: '',
  resources: [],
};

export function useEsaFundingPage(): EsaFundingPage {
  const contentQuery = useContentCatalogPayload<EsaFundingContent>(
    CONTENT_CATALOG_TYPES.esaFundingContent,
    EMPTY_ESA_FUNDING_CONTENT,
  );
  const [expandedFAQ, setExpandedFAQ] = useState<number | null>(0);
  const [acknowledged, setAcknowledged] = useState(false);

  return {
    content: contentQuery.payload,
    faqs: ESA_FUNDING_FAQS,
    expandedFAQ,
    acknowledged,
    isLoading: contentQuery.isLoading,
    error: contentQuery.error,
    toggleFAQ: (index) => setExpandedFAQ((currentIndex) => toggleEsaFaq(currentIndex, index)),
    toggleAcknowledged: () => setAcknowledged((current) => !current),
  };
}
