import Menu from '@/lib/auth/components/Menu';
import { useState } from 'react';
import * as XLSX from 'xlsx'; 

const ProductsRecomendation = ({ id }) => {
  const [excelData, setExcelData] = useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (excelData) {
      // Lakukan operasi pencarian atau operasi lainnya di sini
      console.log('ini data excel',excelData); // Contoh: Menampilkan data excel ke konsol
    } else {
      console.log('No excel data available');
    }
  };
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (event) => {
      const data = new Uint8Array(event.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const sheetName = workbook.SheetNames[0];
      const sheet = workbook.Sheets[sheetName];
      const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1, range: 1 });
      setExcelData(jsonData);
    };
    reader.readAsArrayBuffer(file);
  };
  return (
    <div className='container mx-auto flex py-10'>
      <div className='w-3/12 pr-4'>
        <Menu />
      </div>
      <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
        <div className='flex mb-6 items-center justify-between'>
          <h1 className='text-title-sm font-semibold'>
            Generate Recomendation
          </h1>
        </div>
        <div className='group'>
          <h1 className='text-sm  font-semibold'>Contoh Excel</h1>
          <table className='table-data'>
            <thead>
              <tr>
                <th>Product</th>
                <th>Qty</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Tekiro Long Nose Pliers Tang Lancip</td>
                <td>10</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className='container mx-auto mt-8'>
          <form onSubmit={handleSubmit}>
            <div className='mb-4'>
              <label htmlFor='excelFile' className='text-sm  font-semibold'>
                Upload Excel File (.xlsx)
              </label>
              <input
                type='file'
                id='excelFile'
                accept='.xlsx'
                onChange={handleFileChange}
                className='mt-1 p-2 block w-full border border-gray-300 rounded-md focus:outline-none focus:border-blue-500'
              />
            </div>
            <button
              type='submit'
              className='bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600'
            >
              Generate
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default ProductsRecomendation;