"use client";

import { useWrStore } from "@/app/store";
import { numSize } from "@/app/store/common/code/basicCode";
import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { formH1Class } from "@/components/lib/class/comClass";
import { safeDate } from "@/components/lib/func/commom";
import { DatePicker, FormField, FormUi, SelectBox } from "@common/business_components";
import { Button, Checkbox, Input } from "@common/components";
import {  useState } from "react";
import { useFieldArray } from "react-hook-form";

export default function BdstAdd({ form, readonly }: { form: any; readonly?: boolean; }) {

    const { code } = useWrStore((state) => {
        return state;
    });

    const { fields, append, remove } = useFieldArray({
        name: "chgBuilding",
        control: form?.control, // Provide a fallback to avoid errors
    });

    const plusHist = () => {
        append({
            bdstNm: "",
            daddr: "",
            bdstUsgCd: "",
        });
    };
    const [selectedIds, setSelectedIds] = useState<string[]>([]);

    const toggleSelect = (id: string) => {
        setSelectedIds((prev) =>
            prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
        );
    };

    const removeSelected = () => {
        const idxsToRemove = fields
            .map((item, idx) => (selectedIds.includes(item.id) ? idx : -1))
            .filter((index) => index > -1)
            .sort((prevIndex, nextIndex) => nextIndex - prevIndex);

        remove(idxsToRemove);
        setSelectedIds([]);
    };

    return (
        <>
            <h1 className={formH1Class}>중축, 개축, 재축</h1>
            {!readonly && (
                <div className="flex justify-end gap-2 mt-4">

                    <Button type="button" className="" size={"sm"} onClick={plusHist}>
                        이력추가
                    </Button>
                    <Button
                        type="button"
                        className="!bg-red-500 text-white"
                        size={"sm"}
                        onClick={removeSelected}
                    >
                        삭제
                    </Button>

                </div>
            )}
            {fields.map((field, index) => (
                <div
                    key={field.id}
                    // className="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mt-4 items-center"
                    className={`grid ${
                        readonly ? "grid-cols-3" : "grid-cols-[auto,1fr,1fr,1fr]"
                      } gap-2 mt-4 items-center`}
                >
                    {!readonly && (
                    <div className="col-span-1 flex justify-center mr-4">
                        <Checkbox
                            checked={selectedIds.includes(field.id)}
                            onCheckedChange={() => toggleSelect(field.id)}
                        />
                    </div>
                    )}
                    <div className="">
                        <FormField
                            control={form.control}
                            name={`chgBuilding.${index}.bdstChgNm`}
                            render={({ field: f }) => (
                                <FormUi label="구분">
                                    <SelectBox
                                        selectClass={selectClass}
                                        selectArray={code.chBuCd}
                                        onSelectValue={(val) => f.onChange(val)}
                                        value={f.value ?? code.chBuCd[0]?.val}
                                        className={""}
                                        label={""}
                                        readOnly={readonly}
                                    />
                                </FormUi>
                            )}
                        />
                    </div>
                    
                    <div className="">
                        <FormField
                            control={form.control}
                            name={`chgBuilding.${index}.archChgPrmsnDt`}
                            render={({ field: f }) => (
                                <FormUi label="허가일">
                                    <DatePicker
                                        mode="single"
                                        field={{
                                            value: safeDate(f.value) || new Date(),
                                            onChange: (date) => f.onChange(date),
                                        }}
                                        selectClass="w-full"
                                        readOnly={readonly}
                                    />
                                </FormUi>
                            )}
                        />
                    </div>
                    <div className="">
                        <FormField
                            control={form.control}
                            name={`chgBuilding.${index}.archChgArea`}
                            render={({ field: f }) => (
                                <FormUi label="면적(㎡)">
                                    <Input
                                        placeholder="-"
                                        type="text"
                                        onChange={(e) => f.onChange(e.target.value)}
                                        value={f.value || ''}
                                        className={selectClass}
                                        readOnly={readonly}
                                        maxLength={numSize}
                                    />
                                </FormUi>
                            )}
                        />
                    </div>
                </div>
            ))}
            <div className="border-b border-gray-300 my-4"> </div>
        </>
    )
}