import React, { useState } from 'react';
import { QrReader } from 'react-qr-reader';
import { createClient } from '@supabase/supabase-js';
import ArtifactDetail from './ArtifactDetail';
// Initialize Supabase client
const supabase = createClient(
process.env.REACT_APP_SUPABASE_URL,
process.env.REACT_APP_SUPABASE_ANON_KEY
);
const SearchBar = ({ onSearch }) => {
const [searchTerm, setSearchTerm] = useState('');
const [showScanner, setShowScanner] = useState(false);
const [selectedArtifact, setSelectedArtifact] = useState(null);
const handleSearch = () => {
onSearch(searchTerm);
};
const handleScan = async (result) => {
if (result) {
const scannedId = result.text;
console.log("Đã quét mã QR, ID:", scannedId);
setSearchTerm(scannedId);
try {
const { data, error } = await supabase
.from('artifacts')
.select('*')
.eq('id', scannedId)
.single();
if (error) {
console.error('Lỗi khi tìm nạp chi tiết hiện vật:', error);
return;
}
setSelectedArtifact(data);
} catch (error) {
console.error('Lỗi không mong muốn:', error);
}
setShowScanner(false);
}
};
const handleScanError = (error) => {
console.error("Lỗi khi quét mã QR:", error);
};
const handleCloseDetail = () => {
setSelectedArtifact(null);
};
if (selectedArtifact) {
return (
setSearchTerm(e.target.value)}
placeholder="Tìm kiếm hiện vật..."
style={{
padding: '10px',
width: '300px',
borderRadius: '5px 0 0 5px',
border: '1px solid #ccc',
fontSize: '16px',
outline: 'none'
}}
/>
{showScanner && (
Đặt mã QR vào ô quét