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

"use client";

import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { LANCAMENTO_TRANSACTION_TYPES } from "@/lib/lancamentos/constants";
import { cn } from "@/lib/utils/ui";
import {
  CategoriaSelectContent,
  TransactionTypeSelectContent,
} from "../../select-items";
import type { CategorySectionProps } from "./lancamento-dialog-types";

export function CategorySection({
  formState,
  onFieldChange,
  categoriaOptions,
  categoriaGroups,
  isUpdateMode,
  hideTransactionType = false,
}: CategorySectionProps) {
  const showTransactionTypeField = !isUpdateMode && !hideTransactionType;

  return (
    <div className="flex w-full flex-col gap-2 md:flex-row">
      {showTransactionTypeField ? (
        <div className="w-full space-y-1 md:w-1/2">
          <Label htmlFor="transactionType">Tipo de transação</Label>
          <Select
            value={formState.transactionType}
            onValueChange={(value) => onFieldChange("transactionType", value)}
          >
            <SelectTrigger id="transactionType" className="w-full">
              <SelectValue placeholder="Selecione">
                {formState.transactionType && (
                  <TransactionTypeSelectContent
                    label={formState.transactionType}
                  />
                )}
              </SelectValue>
            </SelectTrigger>
            <SelectContent>
              {LANCAMENTO_TRANSACTION_TYPES.filter(
                (type) => type !== "Transferência",
              ).map((type) => (
                <SelectItem key={type} value={type}>
                  <TransactionTypeSelectContent label={type} />
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      ) : null}

      <div
        className={cn(
          "space-y-1 w-full",
          showTransactionTypeField ? "md:w-1/2" : "md:w-full",
        )}
      >
        <Label htmlFor="categoria">Categoria</Label>
        <Select
          value={formState.categoriaId}
          onValueChange={(value) => onFieldChange("categoriaId", value)}
        >
          <SelectTrigger id="categoria" className="w-full">
            <SelectValue placeholder="Selecione">
              {formState.categoriaId &&
                (() => {
                  const selectedOption = categoriaOptions.find(
                    (opt) => opt.value === formState.categoriaId,
                  );
                  return selectedOption ? (
                    <CategoriaSelectContent
                      label={selectedOption.label}
                      icon={selectedOption.icon}
                    />
                  ) : null;
                })()}
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            {categoriaGroups.map((group) => (
              <SelectGroup key={group.label}>
                <SelectLabel>{group.label}</SelectLabel>
                {group.options.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    <CategoriaSelectContent
                      label={option.label}
                      icon={option.icon}
                    />
                  </SelectItem>
                ))}
              </SelectGroup>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}