import React from "react";
import { SiteFilter } from "@ax/components";
import { IQueryValue } from "@ax/types";

import UserFilter from "../LogFilters/UserFilter";
import EventFilter from "../LogFilters/EventFilter";
import ContentFilter from "../LogFilters/ContentFilter";
import DateFilter from "../LogFilters/DateFilter";
import OrderFilter from "../LogFilters/OrderFilter";

import * as S from "./style";

const TableHeader = (props: IProps): JSX.Element => {
	const { isScrolling, filterValues, filterItems, sortItems, isSortAscending, isModeUser } = props;

	return (
		<S.TableHeader isScrolling={isScrolling}>
			{isModeUser ? (
				<>
					<S.FiltersHeader>
						<DateFilter filterItems={filterItems} value={filterValues["date"]} />
						<UserFilter filterItems={filterItems} value={filterValues["users"]} />
						<EventFilter filterItems={filterItems} value={filterValues["eventTypes"]} />
						<OrderFilter sortItems={sortItems} isAscending={isSortAscending} />
					</S.FiltersHeader>
					<S.SiteUserHeader>
						<SiteFilter
							filterItems={filterItems}
							value={filterValues}
							pointer="sites"
							addGlobal={true}
							center={false}
						/>
					</S.SiteUserHeader>
					<S.ContentUserHeader>
						<ContentFilter filterItems={filterItems} value={filterValues["contentTypes"]} />
					</S.ContentUserHeader>
				</>
			) : (
				<>
					<S.UserHeader>
						<DateFilter filterItems={filterItems} value={filterValues["date"]} />
						<UserFilter filterItems={filterItems} value={filterValues["users"]} />
					</S.UserHeader>
					<S.TimeHeader>
						<OrderFilter sortItems={sortItems} isAscending={isSortAscending} />
					</S.TimeHeader>
					<S.SiteHeader>
						<SiteFilter filterItems={filterItems} value={filterValues} pointer="sites" addGlobal={true} />
					</S.SiteHeader>
					<S.ContentHeader>
						<ContentFilter filterItems={filterItems} value={filterValues["contentTypes"]} />
					</S.ContentHeader>
					<S.EventHeader>
						<EventFilter filterItems={filterItems} value={filterValues["eventTypes"]} />
					</S.EventHeader>
				</>
			)}
		</S.TableHeader>
	);
};

interface IProps {
	isScrolling: boolean;
	filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
	sortItems: (isAscending: boolean) => void;
	isSortAscending: boolean;
	filterValues: Record<string, IQueryValue[]>;
	isModeUser: boolean;
}

export default TableHeader;
