import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';
import Tooltip from '@material-hu/mui/Tooltip';

export type ToolButtonProps = {
  title: string;
  ToolIcon: any;
  onClick: (event) => void;
  disabled?: boolean;
  isLastButton?: boolean;
};

export const ToolButton: FC<ToolButtonProps> = props => {
  const {
    title,
    ToolIcon,
    onClick,
    disabled = false,
    isLastButton = false,
  } = props;

  if (disabled) {
    return (
      <Box
        sx={{
          p: 1,
          m: 0,
          height: '40px',
          width: '40px',
          borderTopRightRadius: isLastButton ? '16px' : 0,
          borderBottomRightRadius: isLastButton ? '16px' : 0,
        }}
      >
        <ToolIcon
          sx={{ color: '#e1ffe178' }}
          fontSize="medium"
        />
      </Box>
    );
  }

  return (
    <Tooltip
      title={title}
      componentsProps={{
        tooltip: {
          sx: {
            bgcolor: '#000000',
            borderRadius: 0,
            fontWeight: 300,
          },
        },
      }}
    >
      <IconButton
        aria-label={title}
        sx={{
          p: 1,
          height: '40px',
          width: '40px',
          borderRadius: 0,
          borderTopRightRadius: isLastButton ? '16px' : 0,
          borderBottomRightRadius: isLastButton ? '16px' : 0,
          '&:hover': {
            backgroundColor: '#e1ffe140',
          },
        }}
        onClick={onClick}
      >
        <ToolIcon
          sx={{ color: '#ffffff' }}
          fontSize="medium"
        />
      </IconButton>
    </Tooltip>
  );
};

export default ToolButton;