import React, { FC } from "react";
import { IAddtionalElements } from "../../definitions/additional";
import { getFormDefinition } from "../../definitions/definitionHelper";
import { Form,Aligment } from "venice-ui";

interface IElementDetails {
  element: IAddtionalElements;
  saveChanges: (element: IAddtionalElements, isSource: boolean) => void;
  readOnly: boolean;
  handleFieldFocus: (name: string) => void;
  handleFieldBlur: () => void;
}
export const ElementDetails: FC<IElementDetails> = ({
  element,
  saveChanges,
  readOnly,
  handleFieldFocus,
  handleFieldBlur,
}) => {
  const updateForm = (name: string, value: number | string) => {
    const updatedElement = { ...element };
    if (name === "rotation") {
      value = Number(value) % 360;
    }
    (updatedElement as any)[name] = value;
    saveChanges(updatedElement, false);
  };
  const elementForm = {
    action: updateForm,
    data: getFormDefinition(element.type, element)!,
  };

  return (
    <Aligment direction="column" hPadding="16px">
      <Form
        formData={elementForm}
        size={"sm"}
        read={readOnly}
        handleFieldFocus={handleFieldFocus}
        handleFieldBlur={handleFieldBlur}
      />
    </Aligment>
  );
};