import React from 'react'
import { useQuery } from 'react-query'
import { getStudents } from '../../api/students'

const TableHeader = (props: { children: React.ReactNode }) => (
  <th className="px-4 py-2 font-medium text-left text-gray-900 whitespace-nowrap">
    {props.children}
  </th>
)

const Students = () => {
  const { isLoading, data: students } = useQuery('students', () =>
    getStudents(),
  )
  if (isLoading) {
    return <div>Ładowanie</div>
  }
  return (
    <div>
      <button className="bg-green-400 p-3 rounded-lg text-white font-bold hover:bg-green-300">
        Dodaj nowego studenta
      </button>
      <div className="flex mx-auto mt-5 overflow-hidden overflow-x-auto border border-gray-100 rounded">
        <table className="min-w-full text-sm divide-y divide-gray-200">
          <thead>
            <tr className="bg-gray-50">
              <TableHeader>Imie</TableHeader>
              <TableHeader>Nazwisko</TableHeader>
              <TableHeader>Indeks</TableHeader>
              <TableHeader>Zapisany</TableHeader>
              <TableHeader>Tryb</TableHeader>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {students?.data?.students?.map(
              ({ first_name, last_name, index, group, mode }) => (
                <tr>
                  <td className="px-4 py-2 font-medium text-gray-900 whitespace-nowrap">
                    {first_name}
                  </td>
                  <td className="px-4 py-2 text-gray-700 whitespace-nowrap">
                    {last_name}
                  </td>
                  <td className="px-4 py-2 text-gray-700 whitespace-nowrap">
                    {index}
                  </td>
                  <td className="px-4 py-2 text-gray-700 whitespace-nowrap">
                    {group === null ? 'Nie' : 'Tak'}
                  </td>
                  <td className="px-4 py-2 text-gray-700 whitespace-nowrap">
                    {mode ? 'stacjonarny' : 'niestacjonarny'}
                  </td>
                </tr>
              ),
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}

export default Students