import { Autocomplete } from '@base-ui/react/autocomplete';
import { Text } from '#/components/Text';
import { m } from '#/paraglide/messages';
import type { ListRow } from './model';
import * as styles from './OperatorRow.css';
import type { OperatorName } from './query-syntax';
/** the human-readable description for a fixed `op:value` filter (`has:media`, `from:following`). */
const valueLabel = (op: OperatorName, value: string): string | undefined => {
switch (`${op}:${value}`) {
case 'from:following': {
return m['components.web.search.operator.following']();
}
case 'has:media': {
return m['components.web.search.operator.media']();
}
case 'has:video': {
return m['components.web.search.operator.video']();
}
case 'replies:none': {
return m['components.web.search.operator.repliesNone']();
}
case 'replies:only': {
return m['components.web.search.operator.repliesOnly']();
}
default: {
return undefined;
}
}
};
/** a completed `op:value` filter suggestion (e.g. `has:media`, `from:following`). */
export function OperatorValueRow({ row }: { row: Extract<ListRow, { kind: 'operatorValue' }> }) {
const label = valueLabel(row.op, row.value);
return (
<Autocomplete.Item className={styles.row} value={row}>
<Text>
<Text weight="medium">
{row.op}:{row.value}
</Text>
{label !== undefined && <Text color="textContrastMedium"> — {label}</Text>}
</Text>
</Autocomplete.Item>
);
}