import { useState } from 'react'
import { Button } from '../ui'
import OfferList from './OfferList'
import OfferForm from './OfferForm'

// Abo-Angebote: Meldung, "Neues Angebot", Formular und Liste. Sammelliste (ohne customerId) und Kunden-Reiter.
export default function OffersView({ customerId, customerName }) {
  const [message, setMessage] = useState('')
  const [showForm, setShowForm] = useState(false)
  const [reloadKey, setReloadKey] = useState(0)
  const reload = () => setReloadKey((k) => k + 1)

  return (
    <div>
      {message && <p className="msg ok mb-2" role="status">{message}</p>}
      <div className="toolbar">
        <Button variant="primary" onClick={() => { setMessage(''); setShowForm(true) }}>Neues Angebot</Button>
      </div>
      <OfferList customerId={customerId} reloadKey={reloadKey} onMessage={setMessage} onChanged={reload} />
      {showForm && (
        <OfferForm
          fixedCustomerId={customerId}
          fixedCustomerName={customerName}
          onCreated={(text) => { setMessage(text); setShowForm(false); reload() }}
          onCancel={() => setShowForm(false)}
        />
      )}
    </div>
  )
}