import { BaseEntryEditor } from './BaseEntryEditor';

const CreateForm = ({ formData, setFormData }) => (
  <>
    <div>
      <label className="block text-sm font-medium text-gray-700">Content</label>
      <textarea
        value={formData.content || ''}
        onChange={e => setFormData({...formData, content: e.target.value})}
        className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
        rows={4}
      />
    </div>
    <div className="flex items-center">
      <input
        type="checkbox"
        checked={formData.read || false}
        onChange={e => setFormData({...formData, read: e.target.checked})}
        className="rounded border-gray-300"
      />
      <span className="ml-2 text-sm text-gray-700">Read</span>
    </div>
  </>
);

const EditForm = CreateForm;

const ViewMode = ({ formData }) => (
  <>
    <div>
      <span className="text-sm font-medium text-gray-700">Content:</span>
      <pre className="mt-1 text-sm text-gray-900 bg-gray-50 p-2 rounded">{formData.content || ''}</pre>
    </div>
    <div>
      <span className="text-sm text-gray-700">
        {formData.read ? '✓ Read' : '✗ Not Read'}
      </span>
    </div>
  </>
);

export const ReadEntryEditor = (props) => (
  <BaseEntryEditor {...props}>
    {({ formData, setFormData, isEditing, isNew }) => {
      if (isNew) {
        return <CreateForm formData={formData} setFormData={setFormData} />;
      }
      if (isEditing) {
        return <EditForm formData={formData} setFormData={setFormData} />;
      }
      return <ViewMode formData={formData} />;
    }}
  </BaseEntryEditor>
);