import React from "react";

import {
	CheckField,
	TableCounter,
	CustomizeFilters,
	CategoryFilter,
	NameFilter,
	StatusFilter,
	LiveFilter,
	TranslationsFilter,
	Tooltip,
} from "@ax/components";
import { IColumn, IQueryValue, ISchemaField } from "@ax/types";

import * as S from "./style";

const TableHeader = (props: IProps): JSX.Element => {
	const {
		isScrolling,
		isStructuredData,
		selectAllItems,
		checkState,
		sortItems,
		filterItems,
		sortedListStatus,
		totalItems,
		categoryColumns,
		columns,
		setColumns,
		isGlobalPages,
		filterValues,
		siteID,
		maxColumns,
		setHoverCheck,
	} = props;

	const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
	const checkGroups = ["MultiCheckSelect", "AsyncCheckGroup", "CheckGroup"];

	const CategoryColumns =
		isGlobalPages &&
		categoryColumns.map((col) => {
			return (
				activeColumns.includes(col.key) && (
					<React.Fragment key={col.key}>
						{checkGroups.includes(col.type) ? (
							<S.HeaderWrapper>
								<CategoryFilter
									filterItems={filterItems}
									structuredData={col}
									value={filterValues.categories}
									siteID={siteID}
								/>
							</S.HeaderWrapper>
						) : (
							<S.ColumnHeader>{col.title}</S.ColumnHeader>
						)}
					</React.Fragment>
				)
			);
		});

	return (
		<S.TableHeader isScrolling={isScrolling}>
			<S.CheckHeader>
				<Tooltip content="Select All Pages" bottom>
					<CheckField
						key="selectAll"
						name="selectAll"
						value="selectAll"
						onChange={selectAllItems}
						checked={checkState.isAllSelected || checkState.hoverCheck}
						disabled={false}
						error={false}
						setHoverCheck={setHoverCheck}
					/>
				</Tooltip>
			</S.CheckHeader>
			{isStructuredData ? (
				<>
					<S.NameWrapper>
						<NameFilter sortItems={sortItems} sortedState={sortedListStatus} />
					</S.NameWrapper>
					{activeColumns.includes("live") && (
						<S.HeaderWrapper>
							<LiveFilter
								filterItems={filterItems}
								value={filterValues.liveStatus}
								filterOptions={["offline", "active", "scheduled"]}
							/>
						</S.HeaderWrapper>
					)}
					{CategoryColumns}
					{activeColumns.includes("status") && (
						<S.HeaderWrapper>
							<StatusFilter sortItems={sortItems} sortedState={sortedListStatus} isStructuredData={true} />
						</S.HeaderWrapper>
					)}
					{activeColumns.includes("translation") && (
						<S.HeaderWrapper>
							<TranslationsFilter filterItems={filterItems} value={filterValues.translated} />
						</S.HeaderWrapper>
					)}
				</>
			) : (
				<>
					<S.NameWrapper>
						<NameFilter sortItems={sortItems} sortedState={sortedListStatus} />
					</S.NameWrapper>

					{activeColumns.includes("type") && <S.TypeHeader>Type</S.TypeHeader>}
					{activeColumns.includes("live") && (
						<S.HeaderWrapper>
							<LiveFilter filterItems={filterItems} value={filterValues.liveStatus} />
						</S.HeaderWrapper>
					)}
					{CategoryColumns}
					{activeColumns.includes("status") && (
						<S.HeaderWrapper>
							<StatusFilter sortItems={sortItems} sortedState={sortedListStatus} />
						</S.HeaderWrapper>
					)}
					{activeColumns.includes("translation") && (
						<S.HeaderWrapper>
							<TranslationsFilter filterItems={filterItems} value={filterValues.translated} />
						</S.HeaderWrapper>
					)}
					{activeColumns.includes("seo") && <S.SeoHeader>SEO</S.SeoHeader>}
					<S.GlobalMark />
				</>
			)}
			<S.ActionsHeader>
				<TableCounter totalItems={totalItems} />
				<CustomizeFilters columns={columns} setColumns={setColumns} value={activeColumns} limit={maxColumns} />
			</S.ActionsHeader>
		</S.TableHeader>
	);
};

interface IProps {
	isScrolling: boolean;
	isStructuredData: boolean;
	totalItems: number;
	selectAllItems: () => void;
	checkState: Record<string, boolean>;
	sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
	filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
	sortedListStatus: { isAscending: boolean; sortedByDate: boolean; sortedByTitle: boolean; sortedByURL: boolean };
	categoryColumns: ISchemaField[];
	columns: IColumn[];
	setColumns: (columns: IColumn[]) => void;
	maxColumns: { value: number; text: string };
	isGlobalPages: boolean;
	filterValues: any;
	siteID: number;
	setHoverCheck: (state: boolean) => void;
}

export default TableHeader;
