import React from 'react';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {IconX} from '@tabler/icons-react-native';
import {Typography, useNewPost, IconButton} from '@components';

import {NewPostScreens, NewPostStackParamList} from '../../navigation';
import {styles} from './components/screen/styles';
import ScheduleComponent from './components/screen';

const ScheduleScreen = () => {
  const {scheduleDateTime, setScheduleDateTime} = useNewPost();
  const {goBack} = useNavigation();
  const onSubmit = (date: Date) => {
    setScheduleDateTime(date);
    goBack();
  };
  return (
    <ScheduleComponent
      scheduleDateTime={scheduleDateTime}
      onSubmit={onSubmit}
    />
  );
};

interface HeaderNavigationProps {
  navigation: NativeStackNavigationProp<
    NewPostStackParamList,
    NewPostScreens.SchedulePost
  >;
}

const HeaderRight = ({navigation}: HeaderNavigationProps) => {
  const {setScheduleDateTime, setSendPushNotification} = useNewPost();
  const onPress = () => {
    setScheduleDateTime(undefined);
    setSendPushNotification(false);
    navigation.goBack();
  };
  return (
    <IconButton
      style={styles.rightContainer}
      variant="tertiary"
      Icon={IconX}
      onPress={onPress}
    />
  );
};

const HeaderTitle = () => {
  const {t} = useTranslation();
  return <Typography>{t('post.schedule')}</Typography>;
};

ScheduleScreen.HeaderRight = HeaderRight;
ScheduleScreen.HeaderTitle = HeaderTitle;

export default ScheduleScreen;
