import React from 'react';
import {View, Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
import {SHARED_STRINGS} from '@shared/strings';
import {COLORS} from '@shared/colors';
import Icon from '@components/Icon';
import ActivityIndicator from '@components/ActivityIndicator';

import PublishButton from '../PublishButton';

import {styles} from './styles';

interface Props {
  editing?: boolean;
  disabled: boolean;
  onSchedule?: () => void;
  onPublish?: () => void;
  noSchedule?: boolean;
  isScheduleLoading?: boolean;
}

function HeaderRight({
  editing,
  disabled,
  onSchedule,
  onPublish,
  noSchedule,
  isScheduleLoading,
}: Props) {
  const {t} = useTranslation();
  const showScheduleButton = !editing && !noSchedule && onSchedule;
  return (
    <View style={styles.container}>
      {showScheduleButton ? (
        <>
          {isScheduleLoading ? (
            <ActivityIndicator style={styles.scheduleButton} />
          ) : (
            <Pressable
              onPress={onSchedule}
              disabled={disabled}
              style={styles.scheduleButton}>
              <Icon
                name="scheduleSend"
                color={
                  disabled ? COLORS.TRANSPARENT_BLACK_FOUR : COLORS.PRIMARY
                }
              />
            </Pressable>
          )}
        </>
      ) : null}
      <PublishButton
        onPress={onPublish}
        text={t(editing ? SHARED_STRINGS.SAVE : 'post.publish')}
        style={styles.button}
        disabled={disabled}
      />
    </View>
  );
}

export default HeaderRight;