import axios from 'axios';
import { toast } from 'sonner';
import { route } from 'ziggy-js';
import { create } from 'zustand';

const useAdminVideoTimelineStore = create((set) => ({
    videoTimelines: [],
    isLoadingVideoTimelines: false,

    getVideoTimelines: async (uuid) => {
        try {
            set({ isLoadingVideoTimelines: true });

            const response = await axios.get(route('render.elements.get', { uuid }));

            // Just set the elements directly without any mapping
            set({
                videoTimelines: response.data.success.data.video_elements || [],
                isLoadingVideoTimelines: false,
            });

            return response.data.success.data.video_elements || [];
        } catch (error) {
            set({ isLoadingVideoTimelines: false });

            if (axios.isAxiosError(error) && error.response?.data?.error?.message) {
                toast(error.response.data.error.message);
            } else {
                toast('Failed to load video timeline');
            }

            return [];
        }
    },
}));

export default useAdminVideoTimelineStore;