import { useEffect, useState } from "react";
import { useShotService } from "@/app/service/Interaction/ShotService";
import { useSearchParams } from 'next/navigation';
import { useRoleServiceHook } from "@/app/service/Interaction/RoleService";

export const useEditData = (tabType: string) => {
  const searchParams = useSearchParams();
  const projectId = searchParams.get('episodeId') || '';
  const [loading, setLoading] = useState(true);
  const [shotData, setShotData] = useState<any[]>([]);

  const [roleData, setRoleData] = useState<any[]>([]);

  const {
    videoSegments,
    getVideoSegmentList,
    setSelectedSegment,
    regenerateVideoSegment,
    filterRole
  } = useShotService();

  const {
    roleList,
    selectedRole,
    userRoleLibrary,
    fetchRoleList,
    selectRole,
    fetchUserRoleLibrary
  } = useRoleServiceHook();

  useEffect(() => {
    if (tabType === 'shot') {
      getVideoSegmentList(projectId).then(() => {
        setLoading(false);
      }).catch((err) => {
        console.log('useEditData-----err', err);
        setShotData([]);
        setLoading(false);
      });
    } else if (tabType === 'role') {
      fetchRoleList(projectId).then(() => {
        setLoading(false);
      }).catch((err) => {
        console.log('useEditData-----err', err);
        setRoleData([]);
        setLoading(false);
      });
    }
  }, [tabType]);

  useEffect(() => {
    console.log('useEditData-----videoSegments', videoSegments);
    setShotData(videoSegments);
  }, [videoSegments]);

  useEffect(() => {
    setRoleData(roleList);
  }, [roleList]);

  return {
    loading,
    // shot
    shotData,
    setSelectedSegment,
    regenerateVideoSegment,
    filterRole,
    // role
    roleData,
    selectRole,
    selectedRole,
    userRoleLibrary,
    fetchUserRoleLibrary
  }
}