import { LabelsBtn } from '#/features/composer/labels/LabelsBtn';

import * as styles from './ComposerPills.css';
import type { ComposerAction, PostDraft, ThreadDraft } from './state/composer';
import { ThreadgateBtn } from './threadgate/ThreadgateBtn';

export function ComposerPills({
	isReply,
	thread,
	post,
	dispatch,
}: {
	isReply: boolean;
	thread: ThreadDraft;
	post: PostDraft;
	dispatch: (action: ComposerAction) => void;
}) {
	const media = post.embed.media;
	const hasMedia =
		media?.type === 'images' || media?.type === 'gallery' || media?.type === 'gif' || media?.type === 'video';
	const hasLink = !!post.embed.link;

	// Don't render anything if no pills are going to be displayed
	if (isReply && !hasMedia && !hasLink) {
		return null;
	}

	return (
		<div className={styles.pills}>
			{isReply ? null : (
				<ThreadgateBtn
					postgate={thread.postgate}
					onChangePostgate={(nextPostgate) => {
						dispatch({ type: 'updatePostgate', postgate: nextPostgate });
					}}
					threadgateAllowUISettings={thread.threadgate}
					onChangeThreadgateAllowUISettings={(nextThreadgate) => {
						dispatch({
							type: 'updateThreadgate',
							threadgate: nextThreadgate,
						});
					}}
				/>
			)}
			{hasMedia || hasLink ? (
				<LabelsBtn
					labels={post.labels}
					onChange={(nextLabels) => {
						dispatch({
							type: 'updatePost',
							postId: post.id,
							postAction: {
								type: 'updateLabels',
								labels: nextLabels,
							},
						});
					}}
				/>
			) : null}
		</div>
	);
}