import React, { useCallback } from "react";
import { WallpaperHistoryEntry } from "../../types/wallpaper";
import { usePerformanceMonitor } from "../../recoil/usePerformanceMonitor";

interface Props {
  history: WallpaperHistoryEntry[];
  onSelect: (wallpaper: WallpaperHistoryEntry) => void;
}

export const WallpaperHistory: React.FC<Props> = ({ history, onSelect }) => {
  usePerformanceMonitor("WallpaperHistory");

  const handleClick = useCallback(
    (wallpaper: WallpaperHistoryEntry) => {
      onSelect(wallpaper);
    },
    [onSelect],
  );

  const handleKeyPress = useCallback(
    (event: React.KeyboardEvent, wallpaper: WallpaperHistoryEntry) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        onSelect(wallpaper);
      }
    },
    [onSelect],
  );

  return (
    <div className='wallpaper-history' role='list'>
      <h2>Recent Wallpapers</h2>
      {history.map((wallpaper) => (
        <button
          key={wallpaper.key}
          className='history-item'
          onClick={() => handleClick(wallpaper)}
          onKeyDown={(e) => handleKeyPress(e, wallpaper)}
          role='option'
          aria-selected='false'
          tabIndex={0}
          aria-label={`Recent wallpaper ${wallpaper.key} - ${wallpaper.metadata.style}`}
        >
          <img src={wallpaper.upscaledImageUrl || wallpaper.originalImageUrl} alt='' loading='lazy' />
          <div className='history-info'>
            <span className='wallpaper-style'>{wallpaper.metadata.style}</span>
            <span className='wallpaper-date'>{new Date(wallpaper.setAt).toLocaleDateString()}</span>
          </div>
        </button>
      ))}
    </div>
  );
};