import { useCallback, useState } from 'react';

import type { TextProps } from '../Text';

import { useI18n } from '~/src/lib/i18n';
import { toRgba } from '~/src/lib/utils/color';
import Box from '../Box';
import Clickable from '../Clickable';
import FadeOnMount from '../FadeOnMount';
import { usePageTheme } from '../ItemPage/hooks/theme';
import Loading from '../Loading';
import Text from '../Text';

interface ThemedTextProps extends Omit<TextProps, 'children'> {
  text: string;
}

const ThemedText = ({ text, ...textProps }: ThemedTextProps) => {
  const pageTheme = usePageTheme();

  return (
    <Text
      isBold
      size="1.7rem"
      noWrap
      shadow={`${toRgba(pageTheme.backgroundColor, 0.5)} 0 0 0.3em`}
      {...textProps}
    >
      {text}
    </Text>
  );
};

interface SaveButtonProps extends Omit<TextProps, 'children'> {
  onSave: () => Promise<void>;
}

export const SaveButton = ({ onSave, ...textProps }: SaveButtonProps) => {
  const [isSaving, setIsSaving] = useState(false);
  const { t } = useI18n();

  const handleSave = useCallback(async () => {
    setIsSaving(true);
    try {
      await onSave();
    } finally {
      setIsSaving(false);
    }
  }, [onSave]);

  if (isSaving) {
    return (
      <FadeOnMount>
        <Box flexRow alignCenter gap="0.7rem" testId="savingIndicator">
          <Loading size="2rem" />
          <ThemedText {...textProps} text={t('app.actions.saving')} />
        </Box>
      </FadeOnMount>
    );
  }

  return (
    <Clickable
      margin="0 0.2em"
      testId="saveButton"
      onClick={() => handleSave()}
    >
      <ThemedText {...textProps} text={t('app.actions.save')} />
    </Clickable>
  );
};