openmonetis/components/lancamentos/dialogs/lancamento-dialog/pagador-section.tsx

"use client";

import { Label } from "@/components/ui/label";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { PagadorSelectContent } from "../../select-items";
import type { PagadorSectionProps } from "./lancamento-dialog-types";

export function PagadorSection({
	formState,
	onFieldChange,
	pagadorOptions,
	secondaryPagadorOptions,
}: PagadorSectionProps) {
	return (
		<div className="flex w-full flex-col gap-2 md:flex-row">
			<div className="w-full space-y-1">
				<Label htmlFor="pagador">Pagador</Label>
				<Select
					value={formState.pagadorId}
					onValueChange={(value) => onFieldChange("pagadorId", value)}
				>
					<SelectTrigger id="pagador" className="w-full">
						<SelectValue placeholder="Selecione">
							{formState.pagadorId &&
								(() => {
									const selectedOption = pagadorOptions.find(
										(opt) => opt.value === formState.pagadorId,
									);
									return selectedOption ? (
										<PagadorSelectContent
											label={selectedOption.label}
											avatarUrl={selectedOption.avatarUrl}
										/>
									) : null;
								})()}
						</SelectValue>
					</SelectTrigger>
					<SelectContent>
						{pagadorOptions.map((option) => (
							<SelectItem key={option.value} value={option.value}>
								<PagadorSelectContent
									label={option.label}
									avatarUrl={option.avatarUrl}
								/>
							</SelectItem>
						))}
					</SelectContent>
				</Select>
			</div>

			{formState.isSplit ? (
				<div className="w-full space-y-1">
					<Label htmlFor="secondaryPagador">Dividir com</Label>
					<Select
						value={formState.secondaryPagadorId}
						onValueChange={(value) =>
							onFieldChange("secondaryPagadorId", value)
						}
					>
						<SelectTrigger
							id="secondaryPagador"
							disabled={secondaryPagadorOptions.length === 0}
							className={"w-full"}
						>
							<SelectValue placeholder="Selecione">
								{formState.secondaryPagadorId &&
									(() => {
										const selectedOption = secondaryPagadorOptions.find(
											(opt) => opt.value === formState.secondaryPagadorId,
										);
										return selectedOption ? (
											<PagadorSelectContent
												label={selectedOption.label}
												avatarUrl={selectedOption.avatarUrl}
											/>
										) : null;
									})()}
							</SelectValue>
						</SelectTrigger>
						<SelectContent>
							{secondaryPagadorOptions.map((option) => (
								<SelectItem key={option.value} value={option.value}>
									<PagadorSelectContent
										label={option.label}
										avatarUrl={option.avatarUrl}
									/>
								</SelectItem>
							))}
						</SelectContent>
					</Select>
				</div>
			) : null}
		</div>
	);
}