import {
  Editable,
  EditableInput as ChakraEditableInput,
  EditablePreview,
  Box,
  IconButton,
  useEditableControls,
} from '@chakra-ui/react';
import PropTypes from 'prop-types';
import { AiOutlineEdit } from 'react-icons/ai';

EditableInput.propTypes = {
  name: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

function EditableInput({ name, value, onChange, isEditabled }) {
  function EditButton() {
    const { isEditing } = useEditableControls();
    return !isEditing && isEditabled ? <IconButton icon={<AiOutlineEdit />} /> : null;
  }

  const boxProps = isEditabled && {
    boxShadow: 'sm',
    bg: 'gray.900',
    borderRadius: 'md',
  };

  return (
    <Box width="full" opacity={0.5} padding="1" {...boxProps}>
      <Editable isDisabled={!isEditabled} value={value}>
        <Box display="flex" justifyContent="center" alignItems="center">
          <EditablePreview width="full" />
          <EditButton />
        </Box>
        <ChakraEditableInput width="full" name={name} onChange={onChange} />
      </Editable>
    </Box>
  );
}

export default EditableInput;
