import { Sheet } from '@/ui/Sheet';
import ItemDetail from './ItemDetail';
import { useItemSource } from './source';
import { titleOf } from './summary';

interface Props {
  id: string;
  onClose: () => void;
  readOnly?: boolean;
  onDelete?: (id: string) => void;
}

/** 手机上的条目详情:底部抽屉 */
export default function PreviewSheet({ id, onClose, readOnly, onDelete }: Props) {
  const item = useItemSource().useItem(id);
  return (
    <Sheet wide title={item ? titleOf(item) : ''} onClose={onClose}>
      <ItemDetail
        id={id}
        readOnly={readOnly}
        onDelete={(i) => {
          onDelete?.(i);
          onClose();
        }}
      />
    </Sheet>
  );
}