"use client"
// Module
import { useEffect, useLayoutEffect, useRef, useState } from "react"
import classNames from "@/hooks/classNameMerge"
import { api } from "@/library/api"
import { getCookie } from "@/hooks/getCookie"
import { ClientsData } from "@/types/clients"

// Images

// Styles
// Components
export function ClientPage({ projectId }: { projectId: string }) {
	const checkbox = useRef()
	const [checked, setChecked] = useState(false)
	const [indeterminate, setIndeterminate] = useState(false)
	const [selectedPeople, setSelectedPeople] = useState<any>([])
	const [clients, setClients] = useState<ClientsData[]>([])

	useLayoutEffect(() => {
		const isIndeterminate = selectedPeople.length > 0 && selectedPeople.length < clients.length
		setChecked(selectedPeople.length === clients.length)
		setIndeterminate(isIndeterminate)
		// @ts-ignore
		checkbox.current.indeterminate = isIndeterminate
	}, [selectedPeople])

	function toggleAll() {
		// @ts-ignore
		setSelectedPeople(checked || indeterminate ? [] : people)
		setChecked(!checked && !indeterminate)
		setIndeterminate(false)
	}
	const getClients = async () => {
		try {
			await api.get(`/projects/${projectId}/clients`, { headers: { Authorization: `Bearer ${getCookie("token")}` } }).then(res => {
				if (res.status === 200) {
					console.log(res)

					setClients(res.data.data)
				}
			})
		} catch (error) {
			console.log(error)
		}
	}
	useEffect(() => {
		return () => {
			getClients()
		}
	}, [])
	return (
		<div className="m-5">
			<div className="flex mb-4">
				<h2 className=" font-semibold text-2xl">Пользователи</h2>
			</div>
			<div className="flex w-full">
				<div className="overflow-hidden bg-white shadow w-72 border  border-slate-400">
					<ul role="list" className="divide-y divide-gray-200">
						<li className="px-6 py-4">{/* Your content */}</li>
					</ul>
				</div>
				<div className=" w-full bg-white  border border-slate-400 border-l-0">
					<div className="border-b border-gray-200 p-4">
						<h3 className="text-base font-semibold leading-6 text-gray-900">Job Postings</h3>
					</div>
					<div className="px-4 sm:px-6 lg:px-8 flow-root">
						<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
							<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
								<div className="relative">
									<table className="min-w-full table-fixed divide-y divide-gray-300">
										<thead className="">
											<tr>
												<th scope="col" className="relative px-7 sm:w-12 sm:px-6">
													<input type="checkbox" className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" ref={checkbox} checked={checked} onChange={toggleAll} />
												</th>
												<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
													Email
												</th>
											</tr>
										</thead>
										<tbody className="divide-y divide-gray-200 ">
											{clients.map(client => (
												<tr key={client.id} className={selectedPeople.includes(client) ? "bg-gray-50" : undefined}>
													<td className="relative px-7 sm:w-12 sm:px-6">
														{selectedPeople.includes(client) && <div className="absolute inset-y-0 left-0 w-0.5 bg-indigo-600" />}
														<input
															type="checkbox"
															className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
															value={client.email}
															checked={selectedPeople.includes(client)}
															onChange={e => setSelectedPeople(e.target.checked ? [...selectedPeople, client] : selectedPeople.filter(p => p !== client))}
														/>
													</td>
													<td className={classNames("whitespace-nowrap py-4 pr-3 text-sm font-medium", selectedPeople.includes(client) ? "text-indigo-600" : "text-gray-900")}>{client.email}</td>
												</tr>
											))}
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}