import { FC, useState, useRef, useEffect } from 'react';

import CheckIcon from '@material-hu/icons/material/Check';
import EditIcon from '@material-hu/icons/material/Edit';
import Box, { BoxProps } from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import Tooltip from '@material-hu/mui/Tooltip';

import { GroupChatListItem } from 'src/types/chats';
import { getAttachmentFromPictureUrl } from 'src/utils/files';

import { GroupChatAvatar } from 'src/components/dashboard/chat/ChatAvatar';
import { GroupChatName } from 'src/components/dashboard/chat/ChatName';
import { InputInfo } from 'src/components/dashboard/chat/ChatNewGroup';
import { useTranslation } from 'src/components/dashboard/chat/i18n';

export type ChatThreadInfoHeaderProps = BoxProps &
  Pick<GroupChatListItem, 'title' | 'pictureUrl' | 'color'> & {
    onSubmitImage: (image) => void;
    onSubmitTitle: (title) => void;
    editable?: boolean;
  };

const ChatThreadInfoHeader: FC<ChatThreadInfoHeaderProps> = props => {
  const {
    title: defaultTitle,
    pictureUrl,
    color,
    onSubmitImage,
    onSubmitTitle,
    editable = false,
    ...boxProps
  } = props;

  const [titleEditable, setTitleEditable] = useState<boolean>(false);
  const [title, setTitle] = useState<string>(defaultTitle);
  const titleInputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    setTitle(defaultTitle);
  }, [defaultTitle]);

  const { t } = useTranslation();

  const handleChangeTitle = newTitle => {
    setTitle(newTitle);
  };

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

  const handleTitleEdit = () => {
    titleInputRef.current.focus();
    setTitleEditable(true);
  };

  const handleTitleSubmit = () => {
    if (validTitle()) {
      setTitleEditable(false);
      onSubmitTitle(title);
    }
  };

  const renderTitleEditButton = () => (
    <Tooltip title={t('EDIT')}>
      <IconButton
        aria-label={t('EDIT')}
        onClick={handleTitleEdit}
      >
        <EditIcon fontSize="small" />
      </IconButton>
    </Tooltip>
  );

  const renderTitleSubmitButton = () => (
    <Tooltip title={t('SAVE')}>
      <IconButton
        aria-label={t('SAVE')}
        onClick={handleTitleSubmit}
      >
        <CheckIcon fontSize="small" />
      </IconButton>
    </Tooltip>
  );

  const renderForm = () => (
    <InputInfo
      color={color}
      onChangeImage={handleChangeImage}
      onChangeTitle={handleChangeTitle}
      imageFieldProps={{
        label: t('CHANGE_GROUP_IMAGE'),
        defaultImage: image,
      }}
      textFieldProps={{
        'aria-label': t('GROUP_TITLE'),
        defaultValue: defaultTitle,
        inputRef: titleInputRef,
        InputProps: { readOnly: !titleEditable },
        placeholder: t('GROUP_TITLE'),
      }}
      rightComponent={
        !titleEditable ? renderTitleEditButton() : renderTitleSubmitButton()
      }
    />
  );

  const renderInfo = () => (
    <>
      <GroupChatAvatar
        pictureUrl={pictureUrl}
        color={color}
        sx={{
          height: 200,
          width: 200,
          mb: 3,
        }}
      />
      <GroupChatName
        title={title}
        variant="body1"
      />
    </>
  );

  const validTitle = () => title?.length > 0;

  const image = pictureUrl && getAttachmentFromPictureUrl(pictureUrl);

  return (
    <Box
      {...boxProps}
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: 3,
      }}
    >
      {editable ? renderForm() : renderInfo()}
    </Box>
  );
};

export default ChatThreadInfoHeader;