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

interface IStoreItemsSectionProps {
  items: IStoreItem[];
  onAddToCart: (item: IStoreItem, quantity: number) => 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) => (
    <StoreItemRow
      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"
    />
  );
};
