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

import { IconCamera } from '@material-hu/icons/tabler';
import CircularProgress from '@material-hu/mui/CircularProgress';
import IconButton from '@material-hu/mui/IconButton';
import Input from '@material-hu/mui/Input';
import Stack from '@material-hu/mui/Stack';
import { alpha, useTheme } from '@material-hu/mui/styles';

import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';

import { useLokaliseTranslation } from 'src/utils/i18n';

type FormGroupInfoType = {
  name: string;
  picture: string;
  isLoading: boolean;
  onChange: (event: any) => void;
};

const FormGroupInfo: FC<FormGroupInfoType> = props => {
  const { name, picture, isLoading, onChange } = props;
  const [hover, setHover] = useState(false);
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const { t } = useLokaliseTranslation('chat');
  const theme = useTheme();

  const handleAttach = (): void => {
    fileInputRef.current?.click();
  };
  const handleOnMouseOver = () => setHover(true);
  const handleOnMouseLeave = () => setHover(false);

  return (
    <>
      <IconButton
        onClick={handleAttach}
        onMouseOver={handleOnMouseOver}
        onMouseLeave={handleOnMouseLeave}
        sx={{
          zIndex: 0,
          alignSelf: 'center',
          height: 128,
          width: 128,
          borderRadius: '50%',
          p: 0,
          position: 'relative',
          backgroundColor: theme.palette.new.background.layout.default,
          '& img': {
            width: '100%',
            height: '100%',
            borderRadius: '50%',
            objectFit: 'cover',
          },
        }}
      >
        {hover && (
          <Stack
            sx={{
              position: 'absolute',
              top: 0,
              left: '50%',
              transform: 'translate(-50%, 0)',
              height: 128,
              width: 128,
              zIndex: 1,
              borderRadius: '50%',
              backgroundColor: alpha(
                theme.palette.new.background.elements.inverted,
                0.8,
              ),
              p: 0,
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <IconCamera
              size={48}
              color={theme.palette.new.text.neutral.inverted}
            />
          </Stack>
        )}
        {!picture ? (
          <IconCamera
            size={48}
            color={theme.palette.new.text.neutral.lighter}
          />
        ) : (
          <img
            src={picture}
            alt={t('groups.picture_group')}
          />
        )}
        {isLoading && (
          <CircularProgress
            sx={{
              zIndex: 1,
              position: 'absolute',
              top: '35%',
            }}
          />
        )}
      </IconButton>
      <Input
        type="file"
        inputProps={{
          accept: 'image/png, image/jpg, image/jpeg',
        }}
        sx={{
          display: 'none',
        }}
        inputRef={fileInputRef}
        onChange={onChange}
      />
      <HuFormInputClassic
        inputProps={{
          maxLength: 40,
          placeholder: t('groups.group_name'),
          hasCounter: false,
          sx: {
            mt: 3,
            px: 2,
          },
        }}
        name={name}
      />
    </>
  );
};

export default FormGroupInfo;