import Stack from '@material-hu/mui/Stack';

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

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

type TabFormFooterProps = {
  onCancel: () => void;
  onSave: () => void;
  cancelDisabled?: boolean;
  saveDisabled?: boolean;
  saveLoading?: boolean;
};

const TabFormFooter = ({
  onCancel,
  onSave,
  cancelDisabled,
  saveDisabled,
  saveLoading,
}: TabFormFooterProps) => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('general');

  return (
    <HuGoThemeProvider>
      <Stack
        component="footer"
        sx={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'flex-end',
          gap: 2,
          width: '100%',
          py: 1.75,
          px: 2,
          position: 'sticky',
          bottom: 0,
          zIndex: 1,
          backgroundColor: theme => theme.palette.new.background.elements.grey,
        }}
      >
        <Button
          variant="tertiary"
          size="small"
          onClick={onCancel}
          disabled={cancelDisabled}
        >
          {t('cancel')}
        </Button>
        <Button
          variant="primary"
          size="small"
          disabled={saveDisabled}
          loading={saveLoading}
          onClick={onSave}
        >
          {t('save')}
        </Button>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default TabFormFooter;