import { useWrStore } from "@/app/store";
import   { sttnHeadListType } from "@/app/store/ruseFcltMng/fcltSttn/rainSttn/headList";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@common/business_components/ui";
import { Button, Checkbox } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } 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} = useWrStore((state) => state);

    
   let   items =   headList.map(item => ({id:item.id, title:item.title, val:item.visible  }));
   
   
    const form = useForm<z.infer<typeof sttnHeadListType>>({
      resolver: zodResolver(sttnHeadListType),
      defaultValues: [],
    })


    useEffect(() =>{
    form.reset(headList)   


    },[headList])

  const onSubmit = (valueList : z.infer<typeof sttnHeadListType> ) =>{
    if(type==='RNB'){

      rainChSttnHead(valueList)
    }else if(type=== 'RST'){
      rswtChSttnHead(valueList)
    }
  }

  return (
    <>
      <div>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
           
                  <div className="mb-4">
                    <h3>조회항목 설정</h3> 
                  </div>
                  {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>
    </>
  );
}