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

const defaultForm = {
  title: "",
  description: "",
  authorId: "",
  statusId: "",
  cover: ""
};

function BookForm({ authors, statuses, onSubmit, editingBook, onCancel }) {
  const [form, setForm] = useState(defaultForm);

  useEffect(() => {
    if (editingBook) setForm(editingBook);
    else setForm(defaultForm);
  }, [editingBook]);

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

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setForm((prev) => ({ ...prev, cover: reader.result }));
      };
      reader.readAsDataURL(file);
    }
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(form);
    setForm(defaultForm);
    if (onCancel) onCancel();
  };

  const handleCancel = (e) => {
    e.preventDefault();
    setForm(defaultForm);
    if (onCancel) onCancel();
  };

  return (
    <form onSubmit={handleSubmit} className="bg-white p-4 rounded mb-4 shadow-sm">
      <div className="row g-3">
        <div className="col-md-6">
          <input
            className="form-control"
            name="title"
            placeholder="Название книги"
            value={form.title}
            onChange={handleChange}
            required
          />
        </div>
        <div className="col-md-6">
          <select
            className="form-select"
            name="authorId"
            value={form.authorId}
            onChange={handleChange}
            required
          >
            <option value="">Выберите автора</option>
            {authors.map(a => (
              <option key={a.id} value={a.id}>{a.name}</option>
            ))}
          </select>
        </div>
        <div className="col-md-12">
          <textarea
            className="form-control"
            name="description"
            placeholder="Описание"
            value={form.description}
            onChange={handleChange}
            rows={3}
            required
          />
        </div>
        <div className="col-md-6">
          <select
            className="form-select"
            name="statusId"
            value={form.statusId}
            onChange={handleChange}
            required
          >
            <option value="">Выберите статус</option>
            {statuses.map(s => (
              <option key={s.id} value={s.id}>{s.name}</option>
            ))}
          </select>
        </div>
        <div className="col-md-6">
          <input
            className="form-control"
            type="file"
            name="coverFile"
            accept="image/*"
            onChange={handleFileChange}
            />
        </div>
      </div>
      <div className="mt-3 d-flex gap-2">
        <button className="btn btn-success" type="submit">
          {editingBook ? "Сохранить изменения" : "Добавить книгу"}
        </button>
        <button className="btn btn-secondary" type="button" onClick={handleCancel}>
          Отмена
        </button>
      </div>
    </form>
  );
}

export default BookForm;
