import { FC, ReactNode } from 'react';

import Box from '@material-hu/mui/Box';
import TextField, { TextFieldProps } from '@material-hu/mui/TextField';

import groupsIcon from 'src/assets/svg/group.svg';
import { CHAT_CONSTANTS } from 'src/constants/chats';

import FormImage, { FormImageProps } from 'src/components/FormInputs/FormImage';

export type InputInfoProps = {
  color: string;
  onChangeImage: (image) => void;
  onChangeTitle: (title) => void;
  imageFieldProps?: Partial<FormImageProps>;
  textFieldProps?: TextFieldProps;
  rightComponent?: ReactNode;
};

const InputInfo: FC<InputInfoProps> = props => {
  const {
    onChangeImage,
    onChangeTitle,
    color,
    imageFieldProps,
    textFieldProps,
    rightComponent,
  } = props;

  const handleChangeTitle = event => {
    const { value } = event.target;
    onChangeTitle(value);
  };

  const handleChangeImage = image => {
    onChangeImage(image);
  };

  return (
    <>
      <FormImage
        baseColor={color}
        name="image"
        icon={
          <img
            src={groupsIcon}
            alt=""
            style={{
              width: '65%',
              height: '65%',
            }}
          />
        }
        onChange={handleChangeImage}
        {...imageFieldProps}
      />
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          m: 2,
          width: '80%',
        }}
      >
        <TextField
          name="title"
          variant="standard"
          color="primary"
          inputProps={{
            maxLength: CHAT_CONSTANTS.MAX_CHARACTERS_GROUP_NAME,
          }}
          fullWidth
          onChange={handleChangeTitle}
          maxRows={3}
          multiline
          {...textFieldProps}
        />
        {rightComponent}
      </Box>
    </>
  );
};

export default InputInfo;