import { FC, useEffect, useState } from "react";
import { IRowsConfig, setRowsFromFileds } from "../../../definitionsNew/setFieldsHelper";
import { IListConfing } from "../../../definitionsNew/configs";
import { FormGroup, FormGroupWrapper } from "./settingsForm.style";
import { FormListItem } from "../../FormListItem/FormListItem";
import { PlaceholderHorizontal, PlaceholderVertical } from "./Placeholders";

interface IJointSettingForm {
  hoverID: string;
  movedItem: string;
  targetGroupID: number;
  rows: IRowsConfig[];
  handleDragStart: (e: any, id: string, list: string) => void;
  handleonDragEnd: () => void;
  handleDrop:()=>void;
  handleDragOver: (e: any, id: string, list: string, groupID?: number) => void;
}
export const JointSettingForm: FC<IJointSettingForm> = ({
  rows,
  hoverID,
  movedItem,
  targetGroupID,
  handleDragStart,
  handleDragOver,
  handleonDragEnd,
  handleDrop
}) => {

  const handleUpdateITem = () => {
    // updateItem
  };
  return (
    <FormGroupWrapper onDrop={handleDrop}>
      <PlaceholderHorizontal
        handleDragOver={handleDragOver}
        listName="activeGroups"
        id={"topBox"}
        key={`placeholder_topBox`}
        isActive={hoverID === "topBox"}
      />
      {rows.map((_row) => (
        <>
          <FormGroup key={_row.number}>
            <>
              <PlaceholderVertical
                handleDragOver={handleDragOver}
                listName="activeGroups"
                id={"frontBox"}
                groupID={_row.number}
                key={`placeholder_topBox_${_row.number}`}
                isActive={
                  hoverID === "frontBox" && targetGroupID === _row.number
                }
              />
              {_row.fields.map((_field: any) => (
                <>
                  <FormListItem
                    key={_field.id}
                    id={_field.id}
                    isActive={true}
                    isExportible={false}
                    isVisable={false}
                    updateItem={handleUpdateITem}
                    isExportable={false}
                    isRequired={_field.required || false}
                    isForm={true}
                    handleDragStart={handleDragStart}
                    handleonDragEnd={handleonDragEnd}
                    listName="activeGroups"
                    isDraging={movedItem === _field.id}
                    isGroup={true}
                    groupID={_row.number}
                  />
                  <PlaceholderVertical
                    key={`placeholder_${_field.id}`}
                    handleDragOver={handleDragOver}
                    listName="activeGroups"
                    id={_field.id}
                    isActive={hoverID === _field.id}
                    groupID={_row.number}
                  />
                </>
              ))}
            </>
          </FormGroup>
          <PlaceholderHorizontal
            handleDragOver={handleDragOver}
            listName="activeGroups"
            id={`after_${_row.number}`}
            key={`placeholder_${_row.number}`}
            isActive={hoverID ===`after_${_row.number}`}
          />
        </>
      ))}
    </FormGroupWrapper>
  );
};