import { useWrStore } from "@/app/store";
import { sttnHeadListType } from "@/app/store/ruseFcltMng/fcltSttn/rainSttn/headList";
import { Form, FormControl, FormField, FormItem, FormLabel, } from "@common/business_components/ui";
import { Button, Checkbox } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

export default function HeadChModal({ headList, type }: { headList: z.infer<typeof sttnHeadListType>, type: string }) {
  const { rainChSttnHead, rswtChSttnHead, htdflChSttnHead, pbnstChSttnHead } = useWrStore((state) => state);


  const items = headList.map(item => ({ id: item.id, title: item.title, val: item.visible }));

  const form = useForm<z.infer<typeof sttnHeadListType>>({
    resolver: zodResolver(sttnHeadListType),
    defaultValues: headList,
  });

  useEffect(() => {
    form.reset(headList);
  }, [headList, form]);

  const rawValues = form.watch();
  const values: Array<{ visible: boolean }> = Array.isArray(rawValues)
    ? rawValues
    : Object.values(rawValues);

  const allChecked = values.every((v) => v.visible);

  const toggleAll = (checked: boolean) => {
    const newValues = values.map((v) => ({ ...v, visible: checked }));
    form.reset(newValues);
  };

  const onSubmit = (valueList: z.infer<typeof sttnHeadListType>) => {
    if (type === 'RNB') {
      rainChSttnHead(valueList)
    } else if (type === 'RST') {
      rswtChSttnHead(valueList)
    } else if (type === 'HTB') {
      htdflChSttnHead(valueList)
    } else if (type === 'PBN') {
      pbnstChSttnHead(valueList)
    }
  }

  return (
    <>
      <div>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">

            <div className="mb-4">
              <h3>조회항목 설정</h3>
            </div>
            {/* 전체 선택/해제 체크박스 */}
            <FormItem className="flex flex-row items-start space-x-3">
              <FormControl>
                <Checkbox
                  checked={allChecked}
                  onCheckedChange={(checked) => toggleAll(checked as boolean)}
                />
              </FormControl>
              <FormLabel className="text-xl font-bold">전체</FormLabel>
            </FormItem>
            {items.map((item, index) => (
              <FormField
                key={`${index}.id`}
                control={form.control}
                name={`${index}.visible`}
                render={({ field }) => {
                  return (
                    <FormItem
                      key={`${index}.id` + 'item'}
                      className="flex flex-row items-start space-x-3 space-y-0"
                    >
                      <FormControl>
                        <Checkbox
                          checked={field.value}
                          onCheckedChange={(checked) => {
                            field.onChange(checked);
                            return;
                          }
                          }
                        />
                      </FormControl>
                      <FormLabel className="text-xl">
                        {item.title}
                      </FormLabel>
                    </FormItem>
                  );
                }}
              />
            ))}
            <Button type="submit">항목 표출 변경</Button>
          </form>
        </Form>
      </div>
    </>
  );
}