import ContentCopyOutlined from '@material-hu/icons/material/ContentCopyOutlined';
import DeleteOutlined from '@material-hu/icons/material/DeleteOutlined';
import KeyboardArrowDown from '@material-hu/icons/material/KeyboardArrowDown';
import KeyboardArrowUp from '@material-hu/icons/material/KeyboardArrowUp';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

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

export type QuestionActionsProps = {
  disabled?: boolean;
  index: number;
  length: number;
  onMoveUp?: () => void;
  onMoveDown?: () => void;
  onDuplicate?: () => void;
  onDelete?: () => void;
};

const QuestionActions = ({
  disabled = false,
  index,
  length,
  onMoveUp,
  onMoveDown,
  onDuplicate,
  onDelete,
}: QuestionActionsProps) => {
  const { t } = useLokaliseTranslation('learning');

  return (
    <Stack
      sx={{
        gap: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
      }}
    >
      <Typography variant="h5">{index + 1}</Typography>
      {onMoveUp && (
        <Tooltip title={t('general:move_up')}>
          <span>
            <IconButton
              id="move-up-question-button"
              aria-label={t('general:move_up')}
              onClick={onMoveUp}
              color="secondary"
              disabled={disabled || index <= 0}
              sx={{ p: 0 }}
            >
              <KeyboardArrowUp fontSize="large" />
            </IconButton>
          </span>
        </Tooltip>
      )}
      {onMoveDown && (
        <Tooltip title={t('general:move_down')}>
          <span>
            <IconButton
              id="move-down-question-button"
              aria-label={t('general:move_down')}
              onClick={onMoveDown}
              color="secondary"
              disabled={disabled || index >= length - 1}
              sx={{ p: 0 }}
            >
              <KeyboardArrowDown fontSize="large" />
            </IconButton>
          </span>
        </Tooltip>
      )}
      {onDuplicate && (
        <Tooltip title={t('general:duplicate')}>
          <span>
            <IconButton
              id="duplicate-question-button"
              aria-label={t('general:duplicate')}
              onClick={onDuplicate}
              color="secondary"
              disabled={disabled}
              sx={{ p: 0 }}
            >
              <ContentCopyOutlined />
            </IconButton>
          </span>
        </Tooltip>
      )}
      {onDelete && (
        <Tooltip title={t('general:delete')}>
          <span>
            <IconButton
              id="delete-question-button"
              aria-label={t('general:delete')}
              onClick={onDelete}
              color="secondary"
              disabled={disabled}
              sx={{ p: 0 }}
            >
              <DeleteOutlined />
            </IconButton>
          </span>
        </Tooltip>
      )}
    </Stack>
  );
};

export default QuestionActions;