import React from "react";

import {
  FormControl,
  Form,
  CardsList,
  Container,
  Button,
  InstallmentsItem,
} from "./components";

import useCard from "./hooks/useCard";

import "./MercadoPagoSDK.css";
import cvvImage from "./assets/cvv.svg";
import cards from "./utils/cards";

const MercadoPagoSDK = ({ public_key }) => {
  const {
    cardNumber,
    setCardNumber,
    cardExpirationMonth,
    setCardExpirationMonth,
    cardExpirationYear,
    setCardExpirationYear,
    securityCode,
    setSecurityCode,
    cardholderName,
    identificationNumber,
    cardholderEmail,
    handleInputChange,
    cardName,
    onlyNumberKey,
  } = useCard(public_key);

  const card = cards.filter(({ name }) => name.includes(cardName));

  return (
    <Container>
      <Form id="form-checkout">
        <div className="header-form">
          <h3 className="form-title">Tarjeta de crédito o débito</h3>
          <CardsList />
        </div>

        <div className="form-group">
          <div className="card_number__wrapper">
            <FormControl
              type="text"
              label="Número de tarjeta"
              name="cardNumber"
              value={cardNumber
                .replace(/\s/g, "")
                .replace(/\D/g, "")
                .replace(/([0-9]{4})/g, "$1 ")
                .trim()}
              onChange={({ target }) => setCardNumber(target.value)}
              onKeyDown={onlyNumberKey}
              id="form-checkout__cardNumber"
            />
            {cardName.trim().length > 0 && (
              <img
                src={card[0].url}
                alt={`${card[0].name}`}
                draggable={false}
              />
            )}
          </div>
          <select
            name="issuer"
            id="form-checkout__issuer"
            disabled={true}
            className="checkout__issuer"
          ></select>

          <div className="rows">
            <FormControl
              type="text"
              label="Mes de vencimiento"
              value={cardExpirationMonth}
              name="cardExpirationMonth"
              id="form-checkout__cardExpirationMonth"
              maxLength={2}
              onChange={({ target }) => setCardExpirationMonth(target.value)}
              onKeyDown={onlyNumberKey}
            />

            <FormControl
              type="text"
              label="Año de vencimiento"
              value={cardExpirationYear}
              name="cardExpirationYear"
              maxLength={2}
              id="form-checkout__cardExpirationYear"
              onChange={({ target }) => setCardExpirationYear(target.value)}
              onKeyDown={onlyNumberKey}
            />

            <div className="security_code-wrapper">
              <FormControl
                type="text"
                label="Código de seguridad"
                name="securityCode"
                value={securityCode}
                onChange={({ target }) => setSecurityCode(target.value)}
                id="form-checkout__securityCode"
                onKeyDown={onlyNumberKey}
              />
              <img src={cvvImage} alt="CVV" draggable={false} />
            </div>
          </div>
          <FormControl
            type="text"
            label="Nombre del titular que aparece en la tarjeta"
            value={cardholderName}
            name="cardholderName"
            onChange={handleInputChange}
            id="form-checkout__cardholderName"
          />

          <InstallmentsItem cardName={cardName} />

          <div className="identification__wrapper">
            <FormControl
              type="text"
              label="Documento del titular"
              value={identificationNumber}
              name="identificationNumber"
              onChange={handleInputChange}
              id="form-checkout__identificationNumber"
              style={{ paddingLeft: "5rem" }}
            />
            <select
              name="identificationType"
              id="form-checkout__identificationType"
            ></select>
          </div>
        </div>

        <h4 className="form-subtitle">Completa tu información</h4>

        <FormControl
          type="email"
          label="E-mail"
          value={cardholderEmail}
          name="cardholderEmail"
          onChange={handleInputChange}
          id="form-checkout__cardholderEmail"
        />

        <Button />
      </Form>
    </Container>
  );
};

export default MercadoPagoSDK;