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

const CreateAPIKey = ({ userId, apiKeyEnum }) => {
  const [apiKey, setApiKey] = useState('');
  const [apiKeys, setApiKeys] = useState([]);
  const [filter, setFilter] = useState('');

  useEffect(() => {
    fetchAPIKeys();
  }, []);

  const fetchAPIKeys = async () => {
    try {
      const response = await axios.get(`http://localhost:3002/api-keys?owner=${userId}&keyType=${apiKeyEnum}`);
      setApiKeys(response.data);
    } catch (error) {
      console.error('Error fetching API keys:', error);
    }
  };

  const handleCreateAPIKey = async () => {
    try {
      const response = await axios.post('http://localhost:3002/generate-api-key', {
        owner: userId,
        keyType: apiKeyEnum,
      });
      setApiKey(response.data.apiKey);
      fetchAPIKeys();
    } catch (error) {
      console.error('Error creating API key:', error);
    }
  };

  const handleDeleteAPIKey = async (id) => {
    try {
      await axios.delete(`http://localhost:3002/api-keys/${id}`);
      fetchAPIKeys();
    } catch (error) {
      console.error('Error deleting API key:', error);
    }
  };

  const filteredApiKeys = apiKeys.filter((key) => key.keyType.includes(filter));

  return (
    <div>
      <h1>API Key Manager</h1>
      <div>
        <input type="text" value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Filter API keys" />
      </div>
      <div>
        <button onClick={handleCreateAPIKey}>Create API Key</button>
        {apiKey && <p>New API Key: {apiKey}</p>}
      </div>
      <div>
        <h2>API Keys</h2>
        <ul>
          {filteredApiKeys.map((key) => (
            <li key={key._id}>
              {key.apiKey} - {key.keyType}
              <button onClick={() => handleDeleteAPIKey(key._id)}>Delete</button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default CreateAPIKey;