import { Field, useFormikContext } from 'formik';
import { FormControl, FormErrorMessage, HStack, Text } from '@chakra-ui/react';
import PropTypes from 'prop-types';

function JobUpdationField({ name, label, as, isEditabled, widthLabel = '70px', ...props }) {
  const { errors, touched, getFieldProps } = useFormikContext();
  if (!name) {
    return;
  }
  const isInvalid = !!errors[name] && touched[name];
  return (
    <FormControl isInvalid={isInvalid}>
      <HStack>
        {label && <Text minWidth={widthLabel}>{label}:</Text>}
        <Field name={name} opacity={0.5} as={as} {...getFieldProps(name)} {...props} isEditabled={isEditabled} />
      </HStack>
      <FormErrorMessage>{errors[name]}</FormErrorMessage>
    </FormControl>
  );
}

JobUpdationField.propTypes = {
  name: PropTypes.string.isRequired,
  label: PropTypes.string,
  as: PropTypes.elementType,
  isEditabled: PropTypes.bool,
  widthLabel: PropTypes.string,
};

JobUpdationField.defaultProps = {
  name: '',
  isEditabled: true,
  widthLabel: '70px',
};

export default JobUpdationField;
