import React from 'react'
import styles from './UpdateInput.module.css'
import EditButton from '../EditButton/EditButton'

const UpdateInput = ({ label, id, value, type, name, onChange, placeholder, maxLength, pattern, minLength, onInvalid, onValid, readOnly }) => {
  const [editable, setEditable] = React.useState(true)

  const handleEdit = () => {
    setEditable(!editable)
  }

  return (
    <div className={styles.input}>
      <div className={styles.input__container}>
        <label htmlFor={id}>{label}</label>
        <div className={styles.input__edit}>
        <input
          className={styles.input__field}
          type={type}
          id={id}
          name={name}
          value={value}
          onChange={onChange}
          required
          placeholder={placeholder}
          pattern={pattern}
          maxLength={maxLength}
          minLength={minLength}
          onInvalid={onInvalid}
          onValid={onValid}
          readOnly={editable}
        />
        <EditButton
          onClick={handleEdit}
          enabled={!editable ? '1' : '0' } />
        </div>
      </div>
    </div>
  )
}

export default UpdateInput
