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

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

import Button from '@material-hu/components/design-system/Buttons/Button';

export type StatusProps = BoxProps & {
  withAction?: boolean;
  onAction?: () => void;
  actionTitle?: string;
};

const Status: FC<StatusProps> = props => {
  const { withAction = false, onAction, actionTitle, ...boxProps } = props;

  const [isDisabled, setIsDisabled] = useState(false);

  useEffect(() => {
    setIsDisabled(false);
  }, [actionTitle]);

  if (!(withAction && onAction && actionTitle)) return null;

  const handleOnClick = () => {
    onAction();
    setIsDisabled(true);
  };

  return (
    <Box
      id="chat-status"
      sx={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'background.paper',
        padding: 1,
      }}
      {...boxProps}
    >
      <Button
        variant="outlined"
        color="primary"
        disabled={isDisabled}
        onClick={handleOnClick}
        size="small"
      >
        {actionTitle}
      </Button>
    </Box>
  );
};

export default Status;