import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [downloadedFiles, setDownloadedFiles] = useState([]);

  useEffect(() => {
    fetchDownloadedFiles();
    const interval = setInterval(() => {
      fetchDownloadedFiles();
    }, 60000); // Fetch new content every minute
    return () => clearInterval(interval);
  }, []);

  const fetchDownloadedFiles = async () => {
    try {
      const response = await axios.get('http://localhost:5001/downloads');
      setDownloadedFiles(response.data);
    } catch (error) {
      console.error('Error fetching downloaded files:', error);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="App-title">Insta Local</h1>
        <div className="downloaded-content">
          {downloadedFiles.length === 0 ? (
            <p>No content available</p>
          ) : (
            downloadedFiles.map((file, index) => {
              const fileUrl = `http://localhost:5001/static/${file}`;
              console.log('Fetching file:', fileUrl); // Log the file URL
              return (
                <div key={index} className="file-item">
                  {file.endsWith('.mp4') ? (
                    <video controls>
                      <source src={fileUrl} type="video/mp4" />
                      Your browser does not support the video tag.
                    </video>
                  ) : (
                    <img src={fileUrl} alt={file} />
                  )}
                </div>
              );
            })
          )}
        </div>
      </header>
    </div>
  );
}

export default App;