import { useStore } from '@nanostores/react'
import { appSettings, generatedImages, isGenerating } from './stores'
import { generateTixyImages } from './generators/tixy'
import { generatePicsumImages } from './generators/picsum'
import { generateArtInstituteImages } from './generators/art-institute'
import { generateGeometricTilesImages } from './generators/geometric-tiles'
import GeneratorSelector from './components/GeneratorSelector'
import ImageGrid from './components/ImageGrid'
import AudioPanel from './components/AudioPanel'

function App() {
  const settings = useStore(appSettings)
  const generating = useStore(isGenerating)

  const handleGenerate = async () => {
    isGenerating.set(true)

    try {
      let newImages

      if (settings.selectedGenerator === 'tixy') {
        newImages = generateTixyImages(settings.gridSize, 64)
      } else if (settings.selectedGenerator === 'picsum') {
        newImages = await generatePicsumImages(settings.gridSize, 512)
      } else if (settings.selectedGenerator === 'art-institute') {
        newImages = await generateArtInstituteImages(settings.gridSize, 512)
      } else if (settings.selectedGenerator === 'geometric-tiles') {
        newImages = generateGeometricTilesImages(settings.gridSize, 256)
      } else {
        newImages = []
      }

      generatedImages.set(newImages)
    } catch (error) {
      console.error('Error generating images:', error)
    }

    isGenerating.set(false)
  }

  return (
    <div className="min-h-screen bg-black text-white flex">
      <div className="flex-1 flex flex-col">
        <GeneratorSelector onGenerate={handleGenerate} isGenerating={generating} />
        <ImageGrid />
      </div>
      <AudioPanel />
    </div>
  )
}

export default App
