'use client'
import { apiURL } from '@/config/api'
import { formatarDataParaPtBr } from '@/utils/DateFormat/formatPt'
import { url } from 'inspector'
import { useState, useEffect } from 'react'

interface talbePrpos {
  head: string[]
  data: any[]
}
export function TableList({ head, data }: talbePrpos) {
  const [datafilter, setDataFilter] = useState<any[]>(data)
  const [filter, setFilter] = useState<string>('')

  function buscarNoArray() {
    const objectFilter = data.filter((objeto) => {
      return Object.values(objeto).some((valor) =>
        String(valor).toLowerCase().includes(filter.toLowerCase()),
      )
    })
    console.log('objectFilter', objectFilter)
    setDataFilter(objectFilter)
  }

  const handleDownload = async () => {
    try {
      const ur = apiURL
      console.log(ur)
      const response = await fetch(ur)
      const blob = await response.blob()
      const url = window.URL.createObjectURL(new Blob([blob]))
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', 'Notificacao.pdf')
      document.body.appendChild(link)
      link.click()
    } catch (error) {
      console.error('Erro ao baixar o arquivo:', error)
    }
  }
  return (
    <>
      <div className="flex mb-3">
        <input
          defaultValue={filter || ''}
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          type="text"
          className="rounded-md pl-4 ml-3 mr-3 h-9 border-2 hover:border-dashed"
        />
        <button
          onClick={buscarNoArray}
          className="bg-gray-300 pl-2 pr-2 rounded-md text-black font-semibold hover:bg-gray-400"
        >
          Buscar
        </button>
      </div>
      <div className="relative overflow-x-auto shadow-md sm:rounded-lg ">
        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
              {head.map((text, key) => {
                return (
                  <th key={key} scope="col" className="px-6 py-3">
                    {text}
                  </th>
                )
              })}
            </tr>
          </thead>
          <tbody>
            {datafilter.length > 0
              ? datafilter.map((object, key) => (
                  <tr
                    key={key}
                    className="bg-white border-b dark:bg-gray-900 dark:border-gray-700"
                  >
                    <th
                      scope="row"
                      className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                    >
                      {formatarDataParaPtBr(object.data)}
                    </th>
                    <td className="px-6 py-4">{object.id}</td>
                    <td className="px-6 py-4">{object.descricao}</td>

                    <td className="px-6 py-4">
                      <a
                        href="#"
                        className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                      >
                        Editar
                      </a>
                    </td>
                    <td className="px-6 py-4">
                      <a
                        href="#"
                        className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                      >
                        Excluir
                      </a>
                    </td>
                  </tr>
                ))
              : data.map((object, key) => (
                  <tr
                    key={key}
                    className="bg-white border-b dark:bg-gray-900 dark:border-gray-700"
                  >
                    <th
                      scope="row"
                      className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                    >
                      {formatarDataParaPtBr(object.data)}
                    </th>
                    <td className="px-6 py-4">{object.id}</td>
                    <td className="px-6 py-4">{object.descricao}</td>

                    <td className="px-6 py-4">
                      <a
                        href={apiURL + '/public/' + object.pathfile}
                        target="target_blank"
                        className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                      >
                        Balixar
                      </a>
                    </td>
                  </tr>
                ))}
          </tbody>
        </table>
      </div>
    </>
  )
}