import { clsx } from 'clsx';

import { DraftsButton } from '#/features/composer/drafts/DraftsButton';

import * as Dialog from '#/components/Dialog';
import { Spinner } from '#/components/Spinner';
import * as Button from '#/components/web/Button';

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

import * as styles from './ComposerTopBar.css';
import type { DraftSummary } from './drafts/state/schema';

export function ComposerTopBar({
	border,
	canPost,
	isReply,
	isPublishQueued,
	isPublishing,
	isThread,
	onCancel,
	onPublish,
	onSelectDraft,
	onSaveDraft,
	onDiscard,
	isEmpty,
	isDirty,
	isEditingDraft,
	canSaveDraft,
}: {
	border?: boolean;
	isPublishing: boolean;
	canPost: boolean;
	isReply: boolean;
	isPublishQueued: boolean;
	isThread: boolean;
	onCancel: () => void;
	onPublish: () => void;
	onSelectDraft: (draft: DraftSummary) => void;
	onSaveDraft: () => Promise<{ success: boolean }>;
	onDiscard: () => void;
	isEmpty: boolean;
	isDirty: boolean;
	isEditingDraft: boolean;
	canSaveDraft: boolean;
}) {
	return (
		<Dialog.Header.Outer border={false} className={clsx(styles.header, border && styles.headerScrolled)}>
			<Dialog.Header.Slot>
				<Button.Button
					label={m['common.action.cancel']()}
					onClick={onCancel}
					size="small"
					color="primary"
					variant="ghost"
				>
					<Button.ButtonText size="md">{m['common.action.cancel']()}</Button.ButtonText>
				</Button.Button>
			</Dialog.Header.Slot>
			<Dialog.Header.Slot>
				{isPublishing ? (
					<div className={styles.publishingRow}>
						<Spinner color="default" label={m['view.composer.publish.publishing']()} size="lg" />
					</div>
				) : (
					<div className={styles.buttonRow}>
						{!isReply && (
							<DraftsButton
								onSelectDraft={onSelectDraft}
								onSaveDraft={onSaveDraft}
								onDiscard={onDiscard}
								isEmpty={isEmpty}
								isDirty={isDirty}
								isEditingDraft={isEditingDraft}
								canSaveDraft={canSaveDraft}
							/>
						)}

						<Button.Button
							label={
								isReply
									? isThread
										? m['view.composer.publish.a11y.replies']()
										: m['view.composer.publish.a11y.reply']()
									: isThread
										? m['view.composer.publish.a11y.posts']()
										: m['view.composer.publish.a11y.post']()
							}
							color="primary"
							size="small"
							onClick={onPublish}
							disabled={!canPost || isPublishQueued}
						>
							<Button.ButtonText size="md">
								{isReply
									? m['common.action.reply']()
									: isThread
										? m['view.composer.publish.action.all']()
										: m['navigation.post.title']()}
							</Button.ButtonText>
						</Button.Button>
					</div>
				)}
			</Dialog.Header.Slot>
		</Dialog.Header.Outer>
	);
}