import { IconChartBar } from '@material-hu/icons/tabler';
import IconButton, { IconButtonProps } from '@material-hu/mui/IconButton';
import { useTheme } from '@material-hu/mui/styles';

import HuTooltip from '@material-hu/components/design-system/Tooltip';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

type PollAddProps = IconButtonProps & {
  onAdd?: () => void;
};

const PollAdd = ({ onAdd, disabled, ...buttonProps }: PollAddProps) => {
  const HuGoThemeProvider = useHuGoTheme();
  const theme = useTheme();

  const { t } = useTranslation('post');

  return (
    <HuGoThemeProvider>
      <HuTooltip
        title={t('post:add_poll_web')}
        direction="bottom"
        disableTooltip={disabled}
      >
        <span>
          <IconButton
            onClick={onAdd}
            size="large"
            disabled={disabled}
            {...buttonProps}
            sx={{ ...buttonProps.sx }}
          >
            <IconChartBar color={theme.palette.new.text.neutral.default} />
          </IconButton>
        </span>
      </HuTooltip>
    </HuGoThemeProvider>
  );
};

export default PollAdd;