import React from "react";
import { Text, View, ViewStyle, ScrollView } from "react-native";

const DEFAULT_HEADERS: any[] = [];
const DEFAULT_SORTABLE_DATA: any[] = [];

const renderHeaderComponent = (component: any) => {
  if (!component) return null;
  if (React.isValidElement(component)) return component;

  if (typeof component === "function") {
    const HeaderComponent = component;

    return <HeaderComponent />;
  }

  return null;
};

const SortableListHeader = ({
  title,
  style,
}: {
  title?: string;
  style?: ViewStyle;
}) => {
  const displayTitle = typeof title === "string" ? title : String(title ?? "");

  return (
    <View style={style}>
      {displayTitle ? <Text>{displayTitle}</Text> : null}
    </View>
  );
};

export type SortableListProps = {
  scrollViewStyle?: ViewStyle;
  contentContainerStyle?: ViewStyle;
  itemStyle?: ViewStyle;
  headerStyle?: ViewStyle;
  columns?: number;
  rowGap?: number;
  columnGap?: number;
  spacing?: number;
  keyExtractor?: (item: any, index?: number) => string;
  renderItem: ({
    item,
    index,
    renderHandle,
  }: {
    item: any;
    index: number;
    renderHandle: (children: React.ReactElement) => React.ReactElement;
  }) => React.ReactNode;
  sortableData?: any[];
  headers?: { index: number; title?: string; component: any }[];
  onDragEnd?: (params: {
    fromIndex?: number;
    toIndex?: number;
    from?: number;
    to?: number;
    data: any[];
  }) => void;
};

export const SortableList = ({
  scrollViewStyle,
  contentContainerStyle,
  itemStyle,
  headerStyle,
  keyExtractor = (item, index) =>
    `sortable-item-${item?.id ?? item?.title ?? index}`,
  renderItem,
  sortableData = DEFAULT_SORTABLE_DATA,
  headers = DEFAULT_HEADERS,
}: SortableListProps) => {
  return (
    <ScrollView
      style={scrollViewStyle}
      contentContainerStyle={contentContainerStyle}
    >
      {(headers || []).map((header, idx) => (
        <View key={`static-header-${idx}`} style={headerStyle}>
          {header.title ? (
            <SortableListHeader title={header.title} />
          ) : (
            renderHeaderComponent(header.component)
          )}
        </View>
      ))}
      {(sortableData || []).map((item, index) => (
        <View key={keyExtractor(item, index)} style={itemStyle}>
          {renderItem({
            item,
            index,
            renderHandle: (children) => children,
          })}
        </View>
      ))}
    </ScrollView>
  );
};