"use client";
import { createContext, useState, useContext, useEffect, ReactNode } from 'react';
import axios from 'axios';
import { useLanguage } from './language-context';

interface Nationality {
    id: number;
    name: string;
    code: string;
    is_tax: number;
}

interface NationalityContextType {
    nationalities: Nationality[];
    loading: boolean;
    error: string | null;
    fetchNationalities: () => Promise<void>;
}

const NationalityContext = createContext<NationalityContextType | null>(null);

interface NationalityProviderProps {
    children: ReactNode;
}

export const NationalityProvider = ({ children }: NationalityProviderProps) => {
    const [nationalities, setNationalities] = useState<Nationality[]>([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const { URL } = useLanguage();

    const fetchNationalities = async () => {
        setLoading(true);
        setError(null);
        
        try {
            const response = await axios.get(`${URL}/nationality`);
            
            if (response.data.status === 200) {
                setNationalities(response.data.data);
            } else {
                setError('Failed to fetch nationalities');
            }
        } catch (err) {
            setError('Error fetching nationalities');
            console.error('Error fetching nationalities:', err);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchNationalities();
    }, [URL]);

    return (
        <NationalityContext.Provider value={{
            nationalities,
            loading,
            error,
            fetchNationalities
        }}>
            {children}
        </NationalityContext.Provider>
    );
};

export const useNationality = () => {
    const context = useContext(NationalityContext);
    if (!context) {
        throw new Error('useNationality must be used within a NationalityProvider');
    }
    return context;
};