import React from 'react';
import {IconCalendarClock} from '@tabler/icons-react-native';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {Badge, BadgeElement, IconButton, useNewPost} from '@components';

import {NewPostScreens, NewPostStackParamList} from '../../navigation';

interface Props {
  onPress?: () => void;
  disabled?: boolean;
  showBadge?: boolean;
}

function BadgeScheduleButton({
  onPress: onPressProp,
  disabled,
  showBadge,
}: Props) {
  const {scheduleDateTime} = useNewPost();
  const navigation =
    useNavigation<StackNavigationProp<NewPostStackParamList>>();
  const onPress = () => {
    onPressProp?.();
    navigation.navigate(NewPostScreens.SchedulePost);
  };

  return (
    <BadgeElement>
      <IconButton
        variant="tertiary"
        disabled={disabled}
        Icon={IconCalendarClock}
        onPress={onPress}
      />
      <BadgeElement.BadgeContainer>
        <Badge show={showBadge || !!scheduleDateTime} />
      </BadgeElement.BadgeContainer>
    </BadgeElement>
  );
}

export default BadgeScheduleButton;
