import FieldProperties from "./fields/field_properties";
import Field from "./fields/field";
import { setFieldErrorMessages } from "../../lib/form_utils";
import { Form } from "react-router-dom";

function getFieldProperties(card?: any) {
  const fields: Array<FieldProperties> = [
    {
      id: "number-field",
      type: "number",
      name: "number",
      label: "Número de tarjeta",
      placeholder: card?.number
    },
    {
      id: "expiration-year-field",
      type: "number",
      name: "expiration_year",
      label: "Año de expiración",
      placeholder: card?.expiration_year
    },
    {
      id: "expiration-month-field",
      type: "number",
      name: "expiration_month",
      label: "Mes de expiración",
      placeholder: card?.expiration_month
    },
    {
      id: "expiration-day-field",
      type: "number",
      name: "expiration_day",
      label: "Día de expiración",
      placeholder: card?.expiration_day
    },
    {
      id: "security-code-field",
      type: "number",
      name: "security_code",
      label: "CVV"
    }
  ];

  return fields;
}

export default function CardForm({ card = null, errors = null }) {
  let field_properties = getFieldProperties(card);

  if(errors)
    field_properties = setFieldErrorMessages(field_properties, errors);

  const fields = field_properties.map(prop => 
    <Field properties={prop}/>
  );

  return (
    <Form method="post" id="card-form">
      {fields}
      <button type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Enviar</button>
    </Form>
  );
}