import { IconAction } from "@ax/components";
import type { IQueryValue, ISiteListConfig } from "@ax/types";

import GridHeaderFilter from "../GridView/GridHeaderFilter";

import * as S from "./style";

const AllSitesHeader = ({ displayMode, sortItems, sortedListStatus, changeDisplayMode }: IAllSitesHeaderProps) => (
	<S.SectionHeader data-testid="all-sites-header">
		<S.Title isActive={true} data-testid="all-sites-title">
			All sites
		</S.Title>
		<S.HeaderIconsWrapper data-testid="all-sites-header-icons">
			{displayMode === "grid" ? (
				<S.FilterSelect data-testid="all-sites-grid-filter">
					<S.FilterSelectLabel data-testid="all-sites-grid-filter-label">Sort by:</S.FilterSelectLabel>{" "}
					<GridHeaderFilter sortItems={sortItems} sortedState={sortedListStatus} />{" "}
				</S.FilterSelect>
			) : null}
			<IconAction icon="Grid2" onClick={() => changeDisplayMode("grid")} active={displayMode === "grid"} />
			<IconAction icon="BulletList" onClick={() => changeDisplayMode("list")} active={displayMode === "list"} />
		</S.HeaderIconsWrapper>
	</S.SectionHeader>
);

export interface IAllSitesHeaderProps {
	displayMode: "list" | "grid";
	sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
	sortedListStatus: ISiteListConfig["sortedListStatus"];
	changeDisplayMode: (mode: "list" | "grid") => void;
}

export default AllSitesHeader;
