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

const ArtistForm = ({ countries = [], epochs = [], onSubmit, artist }) => {
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    epochId: '',
    countryId: ''
  });

  useEffect(() => {
    console.log('Received countries:', countries);
    console.log('Received epochs:', epochs);
    if (artist) {
      setFormData({
        name: artist.name,
        description: artist.description,
        epochId: artist.epoch?.id || artist.epochId || '',
        countryId: artist.country?.id || artist.countryId || ''
      });
    } else {
      setFormData({
        name: '',
        description: '',
        epochId: '',
        countryId: ''
      });
    }
  }, [artist, countries, epochs]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.name || !formData.description || !formData.epochId || !formData.countryId) {
      alert('Все поля обязательны!');
      return;
    }
    onSubmit({
      name: formData.name.trim(),
      description: formData.description.trim(),
      epochId: parseInt(formData.epochId),
      countryId: parseInt(formData.countryId)
    });
    if (!artist) {
      setFormData({
        name: '',
        description: '',
        epochId: '',
        countryId: ''
      });
    }
  };

  return (
    <div className="card bg-dark border-punk">
      <div className="card-body">
        <h3 className="text-punk mb-4">
          <i className={`bi ${artist ? 'bi-pencil-square' : 'bi-person-plus'}`}></i> 
          {artist ? 'Редактировать исполнителя' : 'Добавить исполнителя'}
        </h3>
        
        <form onSubmit={handleSubmit}>
          <div className="mb-3">
            <label className="form-label text-light">Название группы</label>
            <input 
              type="text" 
              className="form-control bg-dark text-light border-punk" 
              name="name"
              value={formData.name}
              onChange={handleChange}
              required
            />
          </div>
          
          <div className="mb-3">
            <label className="form-label text-light">Описание</label>
            <textarea 
              className="form-control bg-dark text-light border-punk" 
              name="description"
              value={formData.description}
              onChange={handleChange}
              required
            />
          </div>
          
          <div className="mb-3">
            <label className="form-label text-light">Эпоха</label>
            <select 
              className="form-select bg-dark text-light border-punk" 
              name="epochId"
              value={formData.epochId}
              onChange={handleChange}
              required
            >
              <option value="">Выберите эпоху</option>
              {epochs.length > 0 ? (
                epochs.map(epoch => (
                  <option key={epoch.id} value={epoch.id}>{epoch.name}</option>
                ))
              ) : (
                <option disabled>Нет данных</option>
              )}
            </select>
          </div>
          
          <div className="mb-3">
            <label className="form-label text-light">Страна</label>
            <select 
              className="form-select bg-dark text-light border-punk" 
              name="countryId"
              value={formData.countryId}
              onChange={handleChange}
              required
            >
              <option value="">Выберите страну</option>
              {countries.length > 0 ? (
                countries.map(country => (
                  <option key={country.id} value={country.id}>{country.name}</option>
                ))
              ) : (
                <option disabled>Нет данных</option>
              )}
            </select>
          </div>
          
          <button type="submit" className="btn btn-punk mt-3">
            <i className={`bi ${artist ? 'bi-save' : 'bi-plus-circle'}`}></i> 
            {artist ? 'Сохранить изменения' : 'Добавить исполнителя'}
          </button>
          
          
        </form>
      </div>
    </div>
  );
};

export default ArtistForm;