import { useState } from 'react';

import type { Handle } from '@atcute/lexicons';

import { MAX_POST_LINES } from '#/lib/constants/post';
import type { Richtext } from '#/lib/rich-text';
import { countLines } from '#/lib/utils/text';

import type { PostNumbering } from '#/state/queries/feed-tuner';

import { PostNumber } from '#/components/PostNumber';
import { RichText } from '#/components/RichText';

import { m } from '#/paraglide/messages';

import * as css from './ClampedPostText.css';

/** post rich text that clamps to {@link MAX_POST_LINES} and reveals the rest behind a show-more button */
export function ClampedPostText({
	authorHandle,
	postNumbering,
	richText,
}: {
	authorHandle: Handle;
	postNumbering?: PostNumbering;
	richText: Richtext;
}) {
	const [limitLines, setLimitLines] = useState(() => countLines(richText.text) >= MAX_POST_LINES);

	// a flex wrapper around RichText for spacing, not a text leaf — the *Text-returns-<Text> rule doesn't apply
	// eslint-disable-next-line bsky-internal/avoid-unwrapped-text
	return (
		<div className={css.richText}>
			<RichText
				authorHandle={authorHandle}
				enableTags
				numberOfLines={limitLines ? MAX_POST_LINES : undefined}
				size="md"
				suffix={!limitLines && postNumbering ? <PostNumber value={postNumbering} /> : undefined}
				value={richText}
			/>
			{limitLines && (
				<div className={css.showMoreRow}>
					<button
						type="button"
						className={css.showMore}
						aria-label={m['components.post.text.expand']()}
						onClick={() => setLimitLines(false)}
					>
						{m['components.post.text.showMore']()}
					</button>
					{postNumbering && <PostNumber value={postNumbering} />}
				</div>
			)}
		</div>
	);
}