import React, { useState, useEffect } from 'react';
import { getDownloadURL, listAll, ref } from 'firebase/storage';
import { storage } from '../firebase';
import './ViewAds.css';

const ViewAds = () => {
  const [urls, setUrls] = useState([]);

  useEffect(() => {
    const fetchUrls = async () => {
      const listRef = ref(storage, 'ads/');
      try {
        const res = await listAll(listRef);
        const urlsPromises = res.items.map(itemRef => getDownloadURL(itemRef));
        const urls = await Promise.all(urlsPromises);
        setUrls(urls);
      } catch (error) {
        console.error('Error fetching URLs:', error);
      }
    };

    fetchUrls();
  }, []);

  const getFileType = (url) => {
    const fileExtension = url.split('?')[0].split('.').pop().toLowerCase();
    const imageExtensions = ['jpeg', 'jpg', 'gif', 'png'];
    const videoExtensions = ['mp4', 'mov', 'avi', 'mkv'];

    if (imageExtensions.includes(fileExtension)) {
      return 'image';
    } else if (videoExtensions.includes(fileExtension)) {
      return 'video';
    } else {
      return 'unsupported';
    }
  };

  return (
    <div>
      <h2>Uploaded Ads</h2>
      <div className="ads-container">
        {urls.map((url, index) => {
          const fileType = getFileType(url);
          console.log(`URL: ${url}, fileType: ${fileType}`);

          return (
            <div key={index} className="ad-item">
              {fileType === 'image' ? (
                <img src={url} alt={`Ad ${index + 1}`} style={{ maxWidth: '100%', height: 'auto' }} />
              ) : fileType === 'video' ? (
                <video controls style={{ maxWidth: '100%', height: 'auto' }}>
                  <source src={url} type={`video/${url.split('.').pop()}`} />
                  Your browser does not support the video tag.
                </video>
              ) : (
                <p>Unsupported file type</p>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default ViewAds;