import { IStoreItem, MetadataType, UserAccountTypes } from '@rpg-engine/shared';
import React, { useState } from 'react';
import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
import { StoreCharacterSkinRow } from '../StoreCharacterSkinRow';
import { StoreItemRow } from '../StoreItemRow';


interface IStoreItemsSectionProps {
  items: IStoreItem[];
  onAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
  atlasJSON: Record<string, any>;
  atlasIMG: string;
  userAccountType?: UserAccountTypes;
}

export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
  items,
  onAddToCart,
  atlasJSON,
  atlasIMG,
  userAccountType,
}) => {
  const [searchQuery, setSearchQuery] = useState('');

  const filteredItems = items.filter(item =>
    item.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const renderStoreItem = (item: IStoreItem) => {
    // Use the specialized character skin row for items with character skin metadata
    if (item.metadataType === MetadataType.CharacterSkin) {
      return (
        <StoreCharacterSkinRow
          key={item._id}
          item={item}
          atlasJSON={atlasJSON}
          atlasIMG={atlasIMG}
          onAddToCart={onAddToCart}
          userAccountType={userAccountType || UserAccountTypes.Free}
        />
      );
    }
    
    // Use the standard item row for all other items
    return (
      <StoreItemRow
        key={item._id}
        item={item}
        atlasJSON={atlasJSON}
        atlasIMG={atlasIMG}
        onAddToCart={onAddToCart}
        userAccountType={userAccountType || UserAccountTypes.Free}
      />
    );
  };

  return (
    <ScrollableContent
      items={filteredItems}
      renderItem={renderStoreItem}
      emptyMessage="No items available."
      searchOptions={{
        value: searchQuery,
        onChange: setSearchQuery,
        placeholder: 'Search items...',
      }}
      layout="list"
      maxHeight="400px"
    />
  );
};
