import React from "react";
import {
  AudioPlayerTrackItem,
  VARIANT_QUEUED_ITEM,
  ItemData,
} from "../AudioPlayer/Components/Item";
import type { CellRenderer, RenderItemArgs } from "./types";
import {
  MenuItem,
  OPERATIONS,
  hasOperation,
} from "@applicaster/zapp-react-native-utils/modalState";

function mapMenuItemToDynamicData(
  item: MenuItem,
  operations: string[]
): ItemData {
  const hasRemove = hasOperation(operations, OPERATIONS.REMOVE);
  const hasReorder = hasOperation(operations, OPERATIONS.REORDER);

  const title =
    typeof item?.title === "string"
      ? item.title
      : item?.title != null
        ? String(item.title)
        : "";

  const summary =
    typeof item?.summary === "string"
      ? item.summary.trim()
      : item?.summary != null
        ? String(item.summary)
        : "";

  return {
    imageUri: item?.icon,
    textLabel1: title,
    textLabel2: summary,
    leadingButton: hasRemove ? "remove" : undefined,
    trailingButton: hasReorder ? "drag" : undefined,
    isSelected: item?.isSelected,
  };
}

export const dynamicCollectionCell: CellRenderer = {
  renderItem: ({
    item,
    index,
    onPress,
    context,
    renderHandle,
  }: RenderItemArgs) => {
    const { editableCollection } = context;
    const operations = editableCollection?.operations || [];

    const handleRemove = () => {
      if (editableCollection?.remove) {
        editableCollection.remove(index);
      }
    };

    const handleDrag = () => {
      // Drag is managed by SortableList drag handle context
    };

    return (
      <AudioPlayerTrackItem
        key={item.id}
        configuration={VARIANT_QUEUED_ITEM}
        data={mapMenuItemToDynamicData(item, operations)}
        onPress={() => onPress(item)}
        onLeadingButtonPress={handleRemove}
        onTrailingButtonPress={handleDrag}
        renderHandle={renderHandle}
      />
    );
  },
};