import React from "react";

import { CheckField, TableCounter, NameFilter, PermissionsFilter, UsersFilter, Tooltip } from "@ax/components";
import { IQueryValue } from "@ax/types";

import * as S from "./style";

const TableHeader = (props: IProps): JSX.Element => {
	const {
		totalItems,
		selectAllItems,
		isScrolling,
		sortItems,
		sortedListStatus,
		isSiteView,
		checkState,
		setHoverCheck,
	} = props;

	return (
		<S.TableHeader isScrolling={isScrolling} data-testid="roles-table-header">
			<S.CheckHeader>
				<Tooltip content="Select All Roles" bottom>
					<CheckField
						key="selectAll"
						name="selectAll"
						value="selectAll"
						onChange={selectAllItems}
						checked={checkState.isAllSelected || checkState.hoverCheck}
						error={false}
						setHoverCheck={setHoverCheck}
					/>
				</Tooltip>
			</S.CheckHeader>
			<S.NameWrapper>
				<NameFilter sortItems={sortItems} sortedState={sortedListStatus} pointer="name" />
			</S.NameWrapper>
			{isSiteView && (
				<S.UsersWrapper>
					<UsersFilter sortItems={sortItems} sortedState={sortedListStatus} />
				</S.UsersWrapper>
			)}
			<S.PermissionsWrapper>
				<PermissionsFilter sortItems={sortItems} sortedState={sortedListStatus} />
			</S.PermissionsWrapper>

			<S.ActionsHeader isSiteView={isSiteView}>
				<TableCounter totalItems={totalItems} />
			</S.ActionsHeader>
		</S.TableHeader>
	);
};

interface IProps {
	totalItems: number;
	isScrolling: boolean;
	selectAllItems: () => void;
	sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
	sortedListStatus: any;
	filterValues: any;
	isSiteView: boolean;
	checkState: Record<string, boolean>;
	setHoverCheck: (state: boolean) => void;
}

export default TableHeader;
