import { FC } from 'react';

import Box, { BoxProps } from '@material-hu/mui/Box';
import CircularProgress from '@material-hu/mui/CircularProgress';
import { useTheme, styled } from '@material-hu/mui/styles';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

import Button, {
  ButtonProps,
} from '@material-hu/components/design-system/Buttons/Button';

import { Attachment as AttachmentType, FileTypes } from 'src/types/attachments';
import { User } from 'src/types/user';

import Audio from 'src/components/attachment/Audio';
import File from 'src/components/attachment/File';
import Gif from 'src/components/attachment/Gif';
import Video from 'src/components/attachment/Video';

const Attachment = styled(Button)({
  position: 'relative',
  color: 'transparent',
  padding: 0,
  '& img': {
    cursor: 'pointer',
    maxWidth: '100%',
    width: 380,
  },
});

const AudioContainer = styled(Box)({
  marginTop: '0.5rem',
});

type LoadingProps = {
  isAudio?: boolean;
};

const Loading = styled(Box, {
  shouldForwardProp: prop => prop !== 'isAudio',
})<LoadingProps>(({ isAudio }) => ({
  position: 'absolute',
  height: !isAudio ? '100%' : undefined,
  width: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  '& .background': {
    width: '45px',
    height: '45px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#aeaeaea3',
    borderRadius: '50%',
    '& .MuiCircularProgress-root': {
      color: 'white',
      width: '75% !important',
      height: '75% !important',
    },
  },
}));

export type AttachmentsProps = ButtonProps &
  BoxProps & {
    messageId: string | number;
    attachment: AttachmentType;
    onClick: () => void;
    isLoading?: boolean;
    sender: User;
  };

const Attachments: FC<AttachmentsProps> = props => {
  const {
    messageId,
    attachment,
    onClick,
    isLoading = false,
    sender,
    ...boxProps
  } = props;

  const theme = useTheme();
  const isMatch = useMediaQuery(theme.breakpoints.down('sm'));

  const loading = (
    <Loading isAudio={attachment?.type === FileTypes.AUDIO}>
      <Box className="background">
        <CircularProgress />
      </Box>
    </Loading>
  );

  if (attachment?.type === FileTypes.FILE) {
    return (
      <File
        file={attachment}
        isLoading={isLoading}
      />
    );
  }

  const getMaxHeight = () => {
    const heightAux = (360 * attachment?.height) / attachment?.width;
    return heightAux;
  };

  if (attachment?.type === FileTypes.VIDEO) {
    return (
      <Attachment {...boxProps}>
        <Video
          media={attachment}
          mediaHeight={getMaxHeight()}
          mediaWidth={360}
          isLoading={isLoading}
          isChat
        />
      </Attachment>
    );
  }

  if (attachment?.type === FileTypes.GIF) {
    return (
      <>
        {!isLoading && (
          <Box sx={{ pb: 0 }}>
            <Gif media={attachment} />
          </Box>
        )}
      </>
    );
  }

  if (attachment?.type === FileTypes.AUDIO) {
    return (
      <>
        <AudioContainer
          {...boxProps}
          sx={{ width: isMatch ? '180px' : 'auto' }}
        >
          <Audio
            messageId={messageId}
            src={attachment.url}
            duration={attachment.width}
            sender={sender}
          />
        </AudioContainer>
      </>
    );
  }

  if (attachment) {
    return (
      <Attachment
        onClick={onClick}
        sx={{ ...boxProps.sx, minHeight: 80 }}
        {...boxProps}
      >
        {isLoading && loading}
        <img
          alt={attachment?.name}
          src={attachment?.url}
          style={{
            height: (attachment?.height * 380) / attachment?.width,
          }}
        />
      </Attachment>
    );
  }
};

export default Attachments;