import { Trash } from "iconsax-react";
import type { EditorObject } from "../../store/editorStore";
import TextInstruction from "./instructions/TextInstruction";
import {
  AlignmentSettings,
  AudioSettings,
  CustomShapeSettings,
  EntranceAnimationSettings,
  GridSettings,
  LineSettings,
  LinkSettings,
  MaskSettings,
  ShapeSettings,
  SizeSettings,
  TextSettings,
  TransformSettings,
  VideoSettings,
} from "./settings";

type ObjectSettingsProps = {
  selectedObject: EditorObject;
  pageWidth: number;
  pageHeight: number;
  onUpdate: (id: string, updates: Partial<EditorObject>) => void;
  onDelete: (id: string) => void;
};

const DECIMAL_KEYS = new Set(["lineHeight"]);

const roundNumbersDeep = <T,>(value: T, parentKey?: string): T => {
  if (typeof value === "number") {
    if (parentKey && DECIMAL_KEYS.has(parentKey)) {
      return value as T;
    }
    return Math.round(value) as T;
  }

  if (Array.isArray(value)) {
    return value.map((item) => roundNumbersDeep(item)) as T;
  }

  if (value && typeof value === "object") {
    const roundedObject = Object.entries(value).reduce<Record<string, unknown>>((acc, [key, nestedValue]) => {
      acc[key] = roundNumbersDeep(nestedValue, key);
      return acc;
    }, {});

    return roundedObject as T;
  }

  return value;
};

const ObjectSettings = ({ selectedObject, pageWidth, pageHeight, onUpdate, onDelete }: ObjectSettingsProps) => {
  const roundedSelectedObject = roundNumbersDeep(selectedObject);

  const handleRoundedUpdate = (id: string, updates: Partial<EditorObject>) => {
    onUpdate(id, roundNumbersDeep(updates));
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between border-b border-border pb-3">
        <h3 className="text-sm font-medium">تنظیمات شیء</h3>
        <button onClick={() => onDelete(selectedObject.id)} className="p-2 hover:bg-red-50 rounded-lg transition-colors text-red-500">
          <Trash size={20} />
        </button>
      </div>

      <AlignmentSettings pageWidth={pageWidth} pageHeight={pageHeight} onUpdate={handleRoundedUpdate} />

      {/* Mask Settings for all objects */}
      <MaskSettings objectId={roundedSelectedObject.id} />

      {roundedSelectedObject.type === "text" && <TextInstruction />}
      {roundedSelectedObject.type === "text" && <TextSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}

      {roundedSelectedObject.type === "rectangle" && <ShapeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}

      {(roundedSelectedObject.type === "line" || roundedSelectedObject.type === "arrow" || roundedSelectedObject.type === "pencil") && <LineSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}

      {roundedSelectedObject.type === "image" && <SizeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}

      {roundedSelectedObject.type === "link" && <LinkSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}

      {roundedSelectedObject.type === "video" && <VideoSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}

      {roundedSelectedObject.type === "audio" && <AudioSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}

      {(roundedSelectedObject.type === "document" || roundedSelectedObject.type === "sticker") && (
        <SizeSettings
          selectedObject={roundedSelectedObject}
          onUpdate={handleRoundedUpdate}
          defaultWidth={roundedSelectedObject.type === "document" ? 200 : 100}
          defaultHeight={roundedSelectedObject.type === "document" ? 250 : 100}
        />
      )}

      {roundedSelectedObject.type === "grid" && <GridSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />}

      {roundedSelectedObject.type === "custom-shape" && (
        <CustomShapeSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
      )}

      <EntranceAnimationSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />

      <TransformSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
    </div>
  );
};

export default ObjectSettings;
