import { useStore } from '@nanostores/react'
import { appSettings, type GeneratorType } from '../stores'

interface GeneratorSelectorProps {
  onGenerate: () => void
  isGenerating: boolean
}

export default function GeneratorSelector({ onGenerate, isGenerating }: GeneratorSelectorProps) {
  console.log('GeneratorSelector rendering with props:', { onGenerate, isGenerating })

  const settings = useStore(appSettings)
  console.log('GeneratorSelector settings:', settings)

  const handleGeneratorChange = (generator: GeneratorType) => {
    console.log('Changing generator to:', generator)
    appSettings.set({ ...settings, selectedGenerator: generator })
  }

  const handleGenerateClick = () => {
    console.log('Generate button clicked in GeneratorSelector!')
    console.log('onGenerate function:', onGenerate)
    onGenerate()
  }

  const generators = [
    { id: 'tixy' as const, name: 'Tixy', description: 'Mathematical expressions' },
    { id: 'picsum' as const, name: 'Picsum', description: 'Random photos' },
    { id: 'art-institute' as const, name: 'Art Institute', description: 'Famous artworks' },
    { id: 'geometric-tiles' as const, name: 'Geo Tiles', description: 'Geometric patterns' }
  ]

  return (
    <div className="border-b border-gray-800 p-6">
      <div className="flex items-center space-x-6">
        <button
          onClick={handleGenerateClick}
          disabled={isGenerating}
          className="bg-white text-black px-6 py-2 font-medium hover:bg-gray-200 disabled:bg-gray-600 disabled:text-gray-400 disabled:cursor-not-allowed"
        >
          {isGenerating ? 'Generating...' : 'Generate'}
        </button>

        <div className="flex space-x-4">
          {generators.map((generator) => (
            <button
              key={generator.id}
              onClick={() => handleGeneratorChange(generator.id)}
              className={`px-4 py-2 border ${
                settings.selectedGenerator === generator.id
                  ? 'border-white bg-white text-black'
                  : 'border-gray-600 text-gray-300 hover:border-gray-400'
              }`}
            >
              <div className="font-medium">{generator.name}</div>
              <div className="text-xs opacity-75">{generator.description}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}