scheduler-front/src/ui/component/popover/schedule/content/ScheduleListContent.tsx

import { ScrollArea } from "@/components/ui/scroll-area";
import { ListScheduleSchema } from "@/data/form/schedule/listSchedule.schema";
import { format } from "date-fns";
import { List, PenSquare } from "lucide-react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import type { ScheduleListContentProps } from "./ContentProps";
import { zodResolver } from "@hookform/resolvers/zod";
import { ScheduleNetwork } from "@/network/ScheduleNetwork";
import type { ScheduleStatus } from "@/const/schedule/ScheduleStatus";
import type { ScheduleType } from "@/const/schedule/ScheduleType";

export const ScheduleListContent = ({ date, setMode, popoverAlign, popoverSide, open }: ScheduleListContentProps) => {
  const [isLoading, setIsLoading] = useState(false);
  const [scheduleList, setScheduleList] = useState([]);
  const [filteredList, setFilteredList] = useState([]);
  const scheduleNetwork = new ScheduleNetwork();

  const listScheduleForm = useForm<z.infer<typeof ListScheduleSchema>>({
    resolver: zodResolver(ListScheduleSchema),
    defaultValues: {
      name: undefined,
      startDate: undefined,
      endDate: undefined,
      status: undefined,
      typeList: undefined,
      styleList: undefined
    }
  });

  const {
    name,
    startDate,
    endDate,
    status,
    typeList,
    styleList
  } = listScheduleForm.watch();

  useEffect(() => {
    if (isLoading) {
      return;
    }

    return (() => {
      setIsLoading(false);
    });
  }, []);

  const reqList = async () => {
    const data = {
      name,
      startDate,
      endDate,
      status: status as ScheduleStatus | undefined,
      styleList,
      typeList: typeList as ScheduleType[] | undefined
    };

    const result = await scheduleNetwork.getList(data);

  }

  return (
    <div className="w-full h-full flex flex-col gap-4">
      <div className="relative w-full h-10 border-b border-b-indigo-300 flex flex-row items-center justify-center">
        <span className="text-indigo-400">{date && format(date, "yyyy년 MM월 dd일")}</span>
        <div className="absolute top-3 right-0.5 group">
          <PenSquare
            className="transition-all duration-150 group-hover:stroke-indigo-600 stroke-indigo-400"
            size={18}
            onClick={() => setTimeout(() => {setMode('create')}, 150)}
          />
        </div>
      </div>
      <div className="w-full h-[calc(100%-40px)]">
        <ScrollArea
          className="w-full h-full flex flex-col justify-start items-center"
        >

        </ScrollArea>
      </div>
    </div>
  )
}