import { useState } from 'react';
// import PropTypes from 'prop-types';
import { Select, Text, Box, IconButton } from '@chakra-ui/react';
import { upperFirst } from 'lodash';

import { AiOutlineEdit } from 'react-icons/ai';

function EditableSelect({ value, name, onChange, options, isEditabled }) {
  const [isEdit, setIsEdit] = useState(false);

  const handleOnChange = (event) => {
    onChange({ target: { name, value: event.target.value } });
    setIsEdit(false);
  };

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

  return isEdit ? (
    <Select name={name} value={value} onChange={handleOnChange}>
      {options.map((option) => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  ) : (
    <Box display="flex" width="full" justifyContent="space-between" padding="1" opacity={0.5} {...boxProps}>
      <Text flex="1" padding="1" onClick={() => setIsEdit(true)}>
        {upperFirst(value)}
      </Text>
      {isEditabled && <IconButton onClick={() => setIsEdit(true)} icon={<AiOutlineEdit />} />}
    </Box>
  );
}

EditableSelect.propTypes = {};

export default EditableSelect;
