import { localizationKeys } from "../../localization/localizationKeys.js";
import { useLocalizations } from "../../localization/makeLocalizable.js";
import { descriptors } from "../../customizables/elementDescriptors.js";
import { Col, Flex, Spinner, Table, Tbody, Td, Text, Th, Thead, Tr } from "../../customizables/index.js";
import { Select, SelectButton, SelectOptionList } from "../../elements/Select.js";
import { Pagination } from "../../elements/Pagination.js";
import { useLocalizeCustomRoles } from "../../hooks/useFetchRoles.js";
import React, { memo, useMemo } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";

//#region src/components/OrganizationProfile/MemberListTable.tsx
const DataTable = (props) => {
	const { headers, page, onPageChange, rows, isLoading, itemCount, itemsPerPage, pageCount, emptyStateLocalizationKey } = props;
	const startingRow = itemCount > 0 ? Math.max(0, (page - 1) * itemsPerPage) + 1 : 0;
	const endingRow = Math.min(page * itemsPerPage, itemCount);
	return /* @__PURE__ */ jsxs(Col, {
		gap: 4,
		sx: { width: "100%" },
		children: [/* @__PURE__ */ jsx(Flex, {
			sx: (t) => ({
				overflowX: "auto",
				padding: t.space.$1
			}),
			children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsx(Tr, { children: headers.map((h, index) => /* @__PURE__ */ jsx(Th, {
				elementDescriptor: descriptors.tableHead,
				localizationKey: h
			}, index)) }) }), /* @__PURE__ */ jsx(Tbody, { children: isLoading ? /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, {
				colSpan: 4,
				children: /* @__PURE__ */ jsx(Spinner, {
					colorScheme: "primary",
					sx: {
						margin: "auto",
						display: "block"
					},
					elementDescriptor: descriptors.spinner
				})
			}) }) : !rows.length ? /* @__PURE__ */ jsx(EmptyRow, { localizationKey: emptyStateLocalizationKey }, "empty") : rows })] })
		}), pageCount > 1 && /* @__PURE__ */ jsx(Pagination, {
			count: pageCount,
			page,
			onChange: onPageChange,
			siblingCount: 1,
			rowInfo: {
				allRowsCount: itemCount,
				startingRow,
				endingRow
			}
		})]
	});
};
const EmptyRow = (props) => {
	return /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, {
		colSpan: 4,
		children: /* @__PURE__ */ jsx(Text, {
			localizationKey: props.localizationKey,
			sx: {
				margin: "auto",
				display: "block",
				width: "fit-content"
			}
		})
	}) });
};
const RowContainer = (props) => {
	return /* @__PURE__ */ jsx(Tr, {
		...props,
		sx: (t) => ({ ":hover": { backgroundColor: t.colors.$neutralAlpha50 } })
	});
};
const RoleSelect = (props) => {
	const { value, fallbackLabel, roles, onChange, isDisabled, triggerSx, optionListSx, prefixLocalizationKey } = props;
	const { localizeCustomRole } = useLocalizeCustomRoles();
	const fetchedRoles = useMemo(() => [...roles || []], [roles]);
	const selectedRole = useMemo(() => fetchedRoles.find((r) => r.value === value), [fetchedRoles, value]);
	const { t } = useLocalizations();
	return /* @__PURE__ */ jsxs(Select, {
		elementId: "role",
		options: useMemo(() => fetchedRoles.map((role) => ({
			value: role.value,
			label: localizeCustomRole(role.value) || role.label
		})), [fetchedRoles, localizeCustomRole]),
		value,
		placeholder: t(localizationKeys("organizationProfile.invitePage.selectDropdown__role")),
		onChange: (role) => onChange(role.value),
		renderOption: (option, _index, isSelected) => /* @__PURE__ */ jsx(RolesListItem, {
			isSelected,
			option
		}),
		children: [
			/* @__PURE__ */ jsx("input", {
				name: "role",
				type: "hidden",
				value
			}),
			/* @__PURE__ */ jsx(SelectButton, {
				sx: triggerSx || ((t$1) => ({
					color: t$1.colors.$colorForeground,
					backgroundColor: "transparent",
					textWrap: "nowrap"
				})),
				isDisabled: isDisabled || !!value && fetchedRoles.length > 0 && !selectedRole,
				children: selectedRole?.label || selectedRole?.value ? /* @__PURE__ */ jsxs(Flex, {
					as: "span",
					gap: 1,
					children: [prefixLocalizationKey && /* @__PURE__ */ jsx(Text, {
						as: "span",
						colorScheme: "secondary",
						localizationKey: prefixLocalizationKey
					}), /* @__PURE__ */ jsx(Text, {
						as: "span",
						colorScheme: "body",
						children: localizeCustomRole(selectedRole?.value) || selectedRole?.label
					})]
				}) : fallbackLabel ? /* @__PURE__ */ jsx(Text, {
					as: "span",
					colorScheme: "body",
					children: fallbackLabel
				}) : null
			}),
			/* @__PURE__ */ jsx(SelectOptionList, { sx: optionListSx })
		]
	});
};
const RolesListItem = memo((props) => {
	const { option, isSelected, sx,...rest } = props;
	return /* @__PURE__ */ jsx(Flex, {
		sx: [(theme) => ({
			width: "100%",
			padding: `${theme.space.$2} ${theme.space.$4}`,
			borderRadius: theme.radii.$md,
			"&:hover": { backgroundColor: theme.colors.$neutralAlpha100 },
			"&[data-focused=\"true\"]": { backgroundColor: theme.colors.$neutralAlpha150 }
		}), sx],
		...rest,
		children: /* @__PURE__ */ jsx(Text, {
			variant: "subtitle",
			children: option?.label
		})
	});
});

//#endregion
export { DataTable, RoleSelect, RowContainer };
//# sourceMappingURL=MemberListTable.js.map