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

const mockRoleData = [{
  id: '1',
  name: 'KAPI',
  imageUrl: 'https://c.huiying.video/images/420bfb4f-b5d4-475c-a2fb-5e40af770b29.jpg',
  generateText: 'A 3 to 5-year-old boy with a light to medium olive skin tone, full cheeks, and warm brown eyes. He has short, straight, dark brown hair, neatly styled with a part on his left side. His facial structure includes a small, slightly upturned nose. His lips are typically held in a slight, gentle, closed-mouth smile, which can part to show his small, white teeth.',
  tags: [
    { id: '1', content: 'boy', color: 'red' },
    { id: '2', content: '3 to 5-year-old', color: 'yellow' },
    { id: '3', content: 'light to medium olive skin tone', color: 'green' },
    { id: '4', content: 'full cheeks', color: 'blue' },
    { id: '5', content: 'warm brown eyes', color: 'purple' },
  ]
}]

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,
    optimizeRoleText,
    updateRoleText,
    regenerateRole
  } = useRoleServiceHook();

  useEffect(() => {
    if (tabType === 'shot') {
      getVideoSegmentList(projectId).then(() => {
        setLoading(false);
      }).catch((err) => {
        console.log('useEditData-----err', err);
        setShotData([]);
        setLoading(false);
      });
    } else if (tabType === 'role') {
      fetchUserRoleLibrary();
      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);
    setRoleData(mockRoleData);
  }, [roleList]);

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