popsute coś

import React from "react";
import CountriesSelect from "./CountriesSelect"

function validate(firstName,
    lastName,
    eMail,
    phone,
    address,
    addressCont,
    zipCode,
    city,
    state,
    country,
    cardNum,
    cardHold,
    cvc) {
    return {
        firstName: firstName.length === 0,
        lastName: lastName.length === 0,
        phone: phone.length === 0,
        address: address.length === 0,
        addressCont: addressCont.length === 0,
        zipCode: zipCode.length === 0,
        city: city.length === 0,
        state: state.length === 0,
        country: country.value === null,
        cardNum: cardNum.length === 0,
        cardHold: cardHold.length === 0,
        cvc: cvc.length === 0 // TU WYWALA UNDEFINED !!
    }
}

export default class Form extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            firstName: '',
            lastName: '',
            eMail: '',
            phone: '',
            address: '',
            addressCont: '',
            zipCode: '',
            city: '',
            state: '',
            country: '',
            cardNum: '',
            cardHold: '',
            cvc: '',

            foc_firstName: false,
            foc_lastName: false,
            foc_eMail: false,
            foc_phone: false,
            foc_address: false,
            foc_addressCont: false,
            foc_zipCode: false,
            foc_city: false,
            foc_state: false,
            foc_carNum: false,
            foc_cardHold: false,
            foc_cvc: false,
        }
        this.handleFirstName = this.handleFirstName.bind(this);
        this.handleFocFirstName = this.handleFocFirstName.bind(this)
        this.handleLastName = this.handleLastName.bind(this);
        this.handleFocLastName = this.handleFocLastName.bind(this);
        this.handleEmail = this.handleEmail.bind(this);
        this.handleFocEmail = this.handleFocEmail.bind(this);
        this.handlePhone = this.handlePhone.bind(this);
        this.handleFocPhone = this.handleFocPhone.bind(this);
        this.handleAddress = this.handleAddress.bind(this);
        this.handleFocAddress = this.handleFocAddress.bind(this);
        this.handleAddressCont = this.handleAddressCont.bind(this);
        this.handleFocAddressCont = this.handleFocAddressCont.bind(this);
        this.handleZipCode = this.handleZipCode.bind(this);
        this.handleFocZipCode = this.handleFocZipCode.bind(this);
        this.handleCity = this.handleCity.bind(this);
        this.handleFocCity = this.handleFocCity.bind(this);
        this.handleState = this.handleState.bind(this);
        this.handleFocState = this.handleFocState.bind(this);
        this.handleCountry = this.handleCountry.bind(this);
        this.handleCardNum = this.handleCardNum.bind(this);
        this.handleFocCardNum =this.handleFocCardNum.bind(this);
        this.handleCardHold = this.handleCardHold.bind(this);
    }


    handleFirstName(evt) {
        this.setState({ firstName: evt.target.value })
    }
    handleFocFirstName(evt) {
        this.setState({ foc_firstName: true })
    }
    handleLastName(evt) {
        this.setState({ lastName: evt.target.value })
    }
    handleFocLastName(evt) {
        this.setState({ foc_lastName: true })
    }
    handleEmail(evt) {
        this.setState({ eMail: evt.target.value })
    }
    handleFocEmail(evt) {
        this.setState({ foc_eMail: true })
    }
    handlePhone(evt) {
        this.setState({ phone: evt.target.value })
    }
    handleFocPhone(evt) {
        this.setState({ foc_phone: true })
    }
    handleAddress(evt) {
        this.setState({ address: evt.target.value })
    }
    handleFocAddress(evt) {
        this.setState({ foc_address: true })
    }
    handleAddressCont(evt) {
        this.setState({ addressCont: evt.target.value })
    }
    handleFocAddressCont(evt) {
        this.setState({ foc_addressCont: true })
    }
    handleZipCode(evt) {
        this.setState({ zipCode: evt.target.value })
    }
    handleFocZipCode(evt) {
        this.setState({ foc_zipCode: true })
    }
    handleCity(evt) {
        this.setState({ city: evt.target.value })
    }
    handleFocCity(evt) {
        this.setState({ foc_city: true })
    }
    handleState(evt) {
        this.setState({ state: evt.target.value })
    }
    handleFocState(evt) {
        this.setState({ foc_state: true })
    }
    handleCountry(evt) {
        this.setState({ country: evt.target.value })
    }
    handleCardNum(evt) {
        this.setState({ cardNum: evt.target.value })
    }
    handleFocCardNum(evt) {
        thos.setState({ foc_carNum: true })
    }
    handleCardHold(evt) {
        this.setState({ cardHold: evt.target.value })
    }
    handleFocCardHold(evt) {
        this.setState({ foc })
    }
    handleCvc(evt) {
        this.setState({ cvc: evt.target.value })
    }
    handleSubmit(evt) {
        if (!this.canBeSubmitted()) {
            evt.preventDefault();
            return
        }
        const { firstName,
            lastName,
            eMail,
            phone,
            address,
            addressCont,
            zipCode,
            city,
            state,
            country,
            cardNum,
            cardHold,
            cvc } = this.state;
        console.table(`First name: ${firstName},
                    Last name: ${lastName},
                    e-mail: ${eMail},
                    phone: ${phone},
                    address: ${address},
                    address cd: ${addressCont},
                    zip code: ${zipCode},
                    city: ${city},
                    state: ${state},
                    country: ${country},
                    card number: ${cardNum},
                    cardHold: ${cardHold},
                    cvc: ${cvc};`
        )
    }
    canBeSubmitted() {
        const errors = validate(this.state.firstName,
            this.state.lastName,
            this.state.eMail,
            this.state.phone,
            this.state.address,
            this.state.addressCont,
            this.state.zipCode,
            this.state.city,
            this.state.state,
            this.state.country,
            this.state.cardNum,
            this.state.cvc
        )
        const isDisabled = Object.keys(errors).some(x => errors[x])
        !isDisabled
    }
    render() {
        const errors = validate(this.state.firstName,
            this.state.lastName,
            this.state.eMail,
            this.state.phone,
            this.state.address,
            this.state.addressCont,
            this.state.zipCode,
            this.state.city,
            this.state.state,
            this.state.country,
            this.state.cardNum,
            this.state.cvc
        )
        const isDisabled = Object.keys(errors).some(x => errors[x])
        return (
            <form onSubmit={this.handleSubmit}>
                <h3>DELIVERY ADDRESS</h3>
                <label htmlFor="firstName">First Name <span className="dot"></span></label>
                <input
                    className={this.state.foc_firstName ? errors.firstName ? "error" : "valid" : ""}
                    type="text"
                    id="firstName"
                    value={this.state.firstName}
                    onChange={this.handleFirstName}
                    onFocus={this.handleFocFirstName} />
                <label htmlFor="lastName">Last Name <span className="dot"></span></label>
                <input
                    className={this.state.foc_lastName ? errors.lastName ? "error" : "valid" : ""}
                    value={this.state.lastName}
                    onChange={this.handleLastName}
                    onFocus={this.handleFocLastName}
                    type="text"
                    id="lastName" />
                <label htmlFor="eMail">E-Mail <span className="dot"></span></label>
                <input
                    className={this.state.foc_eMail ? errors.eMail ? "error" : "valid" : ""}
                    value={this.state.eMail}
                    onChange={this.handleEmail}
                    onFocus={this.handleFocEmail}
                    type="text"
                    id="eMail"
                />
                <label htmlFor="phone">Phone <span className="dot"></span></label>
                <input
                    className={this.state.foc_phone ? errors.eMail ? "error" : "valid" : ""}
                    value={this.state.phone}
                    onChange={this.handlePhone}
                    onFocus={this.handleFocPhone}
                    type="text"
                    id="phone" />
                <label htmlFor="address">Address</label>
                <input
                    className={this.state.foc_address ? errors.address ? "error" : "valid" : ""}
                    value={this.state.address}
                    onChange={this.handleAddress}
                    onFocus={this.handleFocAddress}
                    type="text"
                    id="address" />
                <label htmlFor="addressCont">Address Cont. <span className="dot"></span></label>
                <input type="text" id="addressCont" />
                <label htmlFor="zipCode">Zip Code <span className="dot"></span></label>
                <input type="text" id="zipCode" />
                <label htmlFor="city">City <span className="dot"></span></label>
                <input type="text" id="city" />
                <label htmlFor="state">State <span className="dot"></span></label>
                <input type="text" id="state" />
                <CountriesSelect />
                <h3>PAYMENT</h3>
                <label htmlFor="cardNum">Card number <span className="dot"></span></label>
                <input type="text" id="cardNum" />
                <label htmlFor="cardHold">Card Holder <span className="dot"></span></label>
                <input type="text" id="cardHold" />
                <label htmlFor="cvc">CVC <span className="dot"></span></label>
                <input type="text" id="cvc" />
                <button type="submit">BUY</button>
            </form>
        )
    }
}