openmonetis/components/cartoes/card-form-fields.tsx

"use client";

import { CurrencyInput } from "@/components/ui/currency-input";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import {
  DAYS_IN_MONTH,
  DEFAULT_CARD_BRANDS,
  DEFAULT_CARD_STATUS,
} from "./constants";
import type { CardFormValues } from "./types";
import {
  BrandSelectContent,
  StatusSelectContent,
  AccountSelectContent,
} from "./card-select-items";

interface AccountOption {
  id: string;
  name: string;
  logo: string | null;
}

interface CardFormFieldsProps {
  values: CardFormValues;
  accountOptions: AccountOption[];
  onChange: (field: keyof CardFormValues, value: string) => void;
}

const ensureOption = (options: string[], value: string) => {
  if (!value) {
    return options;
  }
  return options.includes(value) ? options : [value, ...options];
};

export function CardFormFields({
  values,
  accountOptions,
  onChange,
}: CardFormFieldsProps) {
  const brands = ensureOption(
    DEFAULT_CARD_BRANDS as unknown as string[],
    values.brand
  );
  const statuses = ensureOption(
    DEFAULT_CARD_STATUS as unknown as string[],
    values.status
  );

  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <div className="flex flex-col gap-2">
        <Label htmlFor="card-name">Nome do cartão</Label>
        <Input
          id="card-name"
          value={values.name}
          onChange={(event) => onChange("name", event.target.value)}
          placeholder="Ex.: Nubank Platinum"
          required
        />
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="card-brand">Bandeira</Label>
        <Select
          value={values.brand}
          onValueChange={(value) => onChange("brand", value)}
        >
          <SelectTrigger id="card-brand" className="w-full">
            <SelectValue placeholder="Selecione a bandeira">
              {values.brand && <BrandSelectContent label={values.brand} />}
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            {brands.map((brand) => (
              <SelectItem key={brand} value={brand}>
                <BrandSelectContent label={brand} />
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="card-status">Status</Label>
        <Select
          value={values.status}
          onValueChange={(value) => onChange("status", value)}
        >
          <SelectTrigger id="card-status" className="w-full">
            <SelectValue placeholder="Selecione o status">
              {values.status && <StatusSelectContent label={values.status} />}
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            {statuses.map((status) => (
              <SelectItem key={status} value={status}>
                <StatusSelectContent label={status} />
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="card-limit">Limite (R$)</Label>
        <CurrencyInput
          id="card-limit"
          value={values.limit}
          onValueChange={(value) => onChange("limit", value)}
          placeholder="R$ 0,00"
        />
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="card-closing-day">Dia de fechamento</Label>
        <Select
          value={values.closingDay}
          onValueChange={(value) => onChange("closingDay", value)}
        >
          <SelectTrigger id="card-closing-day" className="w-full">
            <SelectValue placeholder="Dia de fechamento" />
          </SelectTrigger>
          <SelectContent>
            {DAYS_IN_MONTH.map((day) => (
              <SelectItem key={day} value={day}>
                Dia {day}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="card-due-day">Dia de vencimento</Label>
        <Select
          value={values.dueDay}
          onValueChange={(value) => onChange("dueDay", value)}
        >
          <SelectTrigger id="card-due-day" className="w-full">
            <SelectValue placeholder="Dia de vencimento" />
          </SelectTrigger>
          <SelectContent>
            {DAYS_IN_MONTH.map((day) => (
              <SelectItem key={day} value={day}>
                Dia {day}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="flex flex-col gap-2 sm:col-span-2">
        <Label htmlFor="card-account">Conta vinculada</Label>
        <Select
          value={values.contaId}
          onValueChange={(value) => onChange("contaId", value)}
          disabled={accountOptions.length === 0}
        >
          <SelectTrigger id="card-account" className="w-full">
            <SelectValue
              placeholder={
                accountOptions.length === 0
                  ? "Cadastre uma conta primeiro"
                  : "Selecione a conta"
              }
            >
              {values.contaId && (() => {
                const selectedAccount = accountOptions.find(
                  (acc) => acc.id === values.contaId
                );
                return selectedAccount ? (
                  <AccountSelectContent
                    label={selectedAccount.name}
                    logo={selectedAccount.logo}
                  />
                ) : null;
              })()}
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            {accountOptions.map((account) => (
              <SelectItem key={account.id} value={account.id}>
                <AccountSelectContent
                  label={account.name}
                  logo={account.logo}
                />
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="flex flex-col gap-2 sm:col-span-2">
        <Label htmlFor="card-note">Anotação</Label>
        <Textarea
          id="card-note"
          value={values.note}
          onChange={(event) => onChange("note", event.target.value)}
          placeholder="Observações sobre este cartão"
        />
      </div>
    </div>
  );
}