import React, { useState, useEffect } from 'react';

const Models: React.FC = () => {
  const modelOptions = [
    'Offline Fast',
    'Offline Fast (FOSS)',
    'Offline Slow',
    'Offline Slow (FOSS)',
    'Online (La Plateforme)',
    'Online (FOSS) (La Plateforme)',
    'Online Cheap (OpenAI)',
    'Online Expensive (OpenAI)',
    'Online Cheap (Anthropic)',
    'Online Expensive (Anthropic)',
    'Online Cheap (Google)',
    'Online Expensive (Google)',
  ];

  const [selectedModel, setSelectedModel] = useState<string>(() => {
    // Load the selected model from localStorage on initial render
    return localStorage.getItem('selectedModel') || 'Offline Fast';
  });

  const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const newModel = event.target.value;
    setSelectedModel(newModel);
  };

  const isOfflineModel = (model: string) => {
    return model.includes('Offline');
  };

  // Save selected model to localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem('selectedModel', selectedModel);
  }, [selectedModel]);

  return (
    <div className="model-background">
      <div className="models">
        <div className="titel">
          <h1>Different AI models</h1>
        </div>
        <div className="model-dropdown">
          <label htmlFor="model-select">Select AI Model:</label>
          <select id="model-select" value={selectedModel} onChange={handleModelChange}>
            {modelOptions.map((model) => (
              <option key={model} value={model}>
                {model}
              </option>
            ))}
          </select>
        </div>
        <div className="grid">
          <button className="code-model model-box">
            <div className="overlay">
              <h3>Code</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="math-model model-box">
            <div className="overlay">
              <h3>Math</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="language-model model-box">
            <div className="overlay">
              <h3>Language</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="character-model model-box">
            <div className="overlay">
              <h3>Character</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="financial-model model-box">
            <div className="overlay">
              <h3>Finance</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="weather-model model-box">
            <div className="overlay">
              <h3>Weather</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="time-planner-model model-box">
            <div className="overlay">
              <h3>Time</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="image-model model-box">
            <div className="overlay">
              <h3>Image</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="default-model model-box">
            <div className="overlay"> 
              <h3>Custom1</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
          <button className="default-model model-box">
            <div className="overlay"> 
              <h3>Custom2</h3>
              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
            </div>
          </button>
        </div>
      </div>
    </div>
  );
};

export default Models;