text: import React, { Component } from 'react';
  import { v4 as uuidv4 } from 'uuid';
  
  const INITIAL_STATE = {
    name: '',
    number: '',
  };
  
  class Form extends Component {
    state = { ...INITIAL_STATE };
  
    handleInputChange = (e) => {
      const { name, value } = e.currentTarget;
      this.setState({ [name]: value });
    };
  
    handleSubmit = (e) => {
      e.preventDefault();
      const { name, number } = this.state;
      const { onAdd } = this.props;
      const isValidateForm = this.validateForm();
      if (!isValidateForm) return;
      onAdd({ id: uuidv4(), name, number });
  
      this.reset();
    };
  
    validateForm = () => {
      const { name, number } = this.state;
      const { onCheckUnique } = this.props;
      if (!name || !number) {
        alert('Some field is empty');
        return false;
      }
      return onCheckUnique(name);
    };
  
    reset = () => {
      this.setState({ ...INITIAL_STATE });
    };
    render() {
      const { name, number } = this.state;
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            Имя
            <input
              type="text"
              name="name"
              value={name}
              pattern="^[a-zA-Zа-яА-Я]+(([' -][a-zA-Zа-яА-Я ])?[a-zA-Zа-яА-Я]*)*$"
              title="Имя может состоять только из букв, апострофа, тире и пробелов. Например Adrian, Jacob Mercer, Charles de Batz de Castelmore d'Artagnan и т. п."
              onChange={this.handleInputChange}
              required
            />
          </label>
          <label>
            Телефон
            <input
              type="tel"
              name="number"
              value={number}
              pattern="\+?\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}"
              title="Номер телефона должен состоять цифр и может содержать пробелы, тире, круглые скобки и может начинаться с +"
              onChange={this.handleInputChange}
              required
            />
          </label>
  
          <button type="submit">Add contact</button>
        </form>
      );
    }
  }
  
  export default Form;
  