"use client"

import Link from "next/link";
import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
  } from "@/components/ui/table"
import { Input } from "@/components/ui/input";
import {
    Pagination,
    PaginationContent,
    PaginationItem,
    PaginationLink,
    PaginationNext,
    PaginationPrevious,
} from "@/components/ui/pagination"

import { Bitcoin, FileEdit,FilePlus2,LayoutList,PackageX,Search, ThumbsDown, ThumbsUp,  UsersRound } from "lucide-react";
import { Button } from "../ui/button";

import {
  useMutation,
  useQuery,
} from '@tanstack/react-query'
import {  GetPessas } from "@/app/api/pessoas/routes";
import { PessoaI } from "@/interfaces/pessoa/interface";
import { useState } from "react";
import DeleteSoftPessoa from "./DialogDelte/DeleteSoft";
import { UsuarioLogadoI } from "@/interfaces/usuario/interface";
import Pessoas from "@/app/(admin-layout)/pessoas/page";
import { convertDataHoraParaPtBr, convertDataParaPtBr } from "@/utils/converDateParaInput";


interface TablePessoasProps{
  usuarioLogado:UsuarioLogadoI
}
const TablePessoas = ({usuarioLogado}:TablePessoasProps) => {
  
 
  const [skip,setSkipped] = useState(0)
  const [filter,setFilter] = useState('')
  const [search,setSearch] = useState('')

  // Queries
  const {data,isPending,isError,error, refetch } = useQuery({
    queryKey:['pessoas',skip,search,usuarioLogado],
    queryFn:() => GetPessas(usuarioLogado,skip,search),

    
  })

 
 const handleFilter = (event:React.ChangeEvent<HTMLInputElement>) =>{
  event.preventDefault();
  const value = event.target.value;
  setFilter(value);

 }

 const handelClickSearcher = () =>{
    setSearch(filter)
 }





  
  if (isPending) {
    return <div className="flex items-center justify-center mt-5">Loading...</div>
  }

  if (isError) {
    return <div className="flex items-center justify-center">Error: {error.message}</div>
  }

 
  
    return ( 
        <div className="flex flex-col ">    
      
        <div className="flex w-2/3 ms-1 mt-6">
        <div className="relative w-full">
          <Input
            type="text"
            id="search"
            name="search"
            onChange={handleFilter}
            value={filter}
            required
            className="mt-1 p-2 w-full border rounded-md mb-2 bg-transparent pr-10" // Aumente o padding à direita para acomodar o ícone
            placeholder="Digite o CPF"
          />
         <span className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
          <Search onClick={handelClickSearcher} />
        </span>
        </div>
      </div>

        <Table>
        <TableCaption>Pessoas</TableCaption>
        <TableHeader>
            <TableRow>
            <TableHead>Nome</TableHead>
            <TableHead>CPF</TableHead>
            <TableHead>Email</TableHead>
            <TableHead>Instagram</TableHead>
            <TableHead>Telefone</TableHead>
            <TableHead>Data Nasc</TableHead>
            <TableHead>Situação</TableHead>
            <TableHead>Modalidade</TableHead>
            <TableHead>Arquivos</TableHead>
            {usuarioLogado.user.role.find((row:string) => row === "Admin") && 
               <TableHead>Excluir</TableHead>
             }
            </TableRow>
        </TableHeader>
        <TableBody>
         
      
            {data?.map((pessoa:PessoaI) => (
             <TableRow key={pessoa.id}>
                <TableCell className="font-medium">{pessoa.nome}</TableCell>
                <TableCell>{pessoa.cpf}</TableCell>
                <TableCell>{pessoa.email}</TableCell>
                <TableCell>{pessoa.instagram}</TableCell>
                <TableCell>{pessoa.telefone}</TableCell>
                <TableCell>{convertDataParaPtBr(pessoa.datanascimento)}</TableCell>
                {pessoa.docs.length <= 0 ? 
                (
                <TableCell>
                  <span className="text-red-600">Situação Irregular</span>
                 </TableCell>)
                :
                (<TableCell>
                  <span className="text-blue-600">Situação Regular</span>
                </TableCell>)
                
               }

               <TableCell>{pessoa.tipo == "Rainha"?"Rainha":"Mirim"}</TableCell>
             
             
                <TableCell><Link href={`/arquivo/${pessoa.id}`} ><FilePlus2  fill="#1a1817" /></Link></TableCell>
                {usuarioLogado.user.role.find((row:string) => row === "Admin") && 
                <TableCell>
                    <DeleteSoftPessoa id={pessoa.id} refetch={refetch} usuario={usuarioLogado} />
                </TableCell>
               }
                
                </TableRow>
            ))}
          
            
        </TableBody>
        </Table>

      <Pagination>
        <PaginationContent>
          <PaginationItem >
            <PaginationPrevious   onClick={() => setSkipped((old) => Math.max(old - 1,0))}  className="cursor-pointer"/>
          </PaginationItem>
          <PaginationItem >
              <PaginationLink>Page</PaginationLink>
            </PaginationItem>
            <PaginationItem >
              <PaginationLink>{skip}</PaginationLink>
            </PaginationItem>
       
       
          <PaginationItem>
            <PaginationNext  onClick={() =>  setSkipped((old) => ((data.length -1)  >= 0 ) ? old+1 : old)} />
          </PaginationItem>
        </PaginationContent>
       </Pagination>
</div>

     );
}
 
export default TablePessoas