import React, {useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useDispatch} from 'react-redux';
import {useNavigation} from '@react-navigation/native';
import Button from '@components/Button';
import Icon from '@components/Icon';
import Text from '@components/Text';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {closeBottomSheet, setLockedBottomSheet} from '@modules/app/redux';
import {HandlePublishProps} from '@modules/post/screens/PublishPost/interfaces';
import {goBack} from '@navigation/navigator';
import {Screens} from '@shared/constants';
import {COLORS} from '@shared/colors';
import {
  addHours,
  getFullDateTime,
  isAfter,
  roundToNearestMinutes,
} from '@shared/utils';

import ChooseDateTime from '../ChooseDateTime';
import {styles} from './styles';

interface Props {
  canSendNotification: boolean;
  onSchedule: ({
    publicationDatetime,
    sendPushNotification,
  }: HandlePublishProps) => void;
  groupId?: number;
}

function SchedulePost({canSendNotification, groupId, onSchedule}: Props) {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const [scheduleDateTime, setScheduleDateTime] = useState(
    roundToNearestMinutes(addHours(new Date(), 1), {nearestTo: 10}),
  );
  const [scheduled, setScheduled] = useState(false);
  const [sendPushNotification, setSendPushNotification] = useState(false);
  const error = !isAfter(scheduleDateTime, new Date());
  const paddingBottom = useSafeAreaBottomPadding();

  const onGoBack = () => {
    dispatch(closeBottomSheet());
    goBack();
  };

  const onSeeScheduledPosts = () => {
    onGoBack();
    navigation.navigate(Screens.POSTS_SCHEDULED, {groupId});
  };

  const onChooseSuccess = () => {
    onSchedule({publicationDatetime: scheduleDateTime, sendPushNotification});
    setScheduled(true);
    dispatch(setLockedBottomSheet(true));
  };

  return (
    <View style={styles.container}>
      {scheduled ? (
        <View style={[styles.containerSuccess, {paddingBottom}]}>
          <View style={styles.contentSuccess}>
            <Icon
              name="checkCircle"
              size="xl"
              color={COLORS.PRIMARY}
              style={styles.icon}
            />
            <Text variant="h6" style={styles.successTitle}>
              {t('post.scheduled_successfully')}
            </Text>
            <Text align="center" variant="subtitle1" style={styles.subtitle}>
              {t('post.will_be_made_on', {
                date: getFullDateTime(scheduleDateTime),
              })}
            </Text>
          </View>
          <Button
            onPress={onSeeScheduledPosts}
            text={t('post.see_scheduled_posts')}
            style={styles.seeScheduledPosts}
          />
          <Button
            onPress={onGoBack}
            text={t('general.back')}
            variant="text"
            textStyle={styles.backButton}
          />
        </View>
      ) : (
        <ChooseDateTime
          scheduleDateTime={scheduleDateTime}
          setScheduleDateTime={setScheduleDateTime}
          error={error}
          onSuccess={onChooseSuccess}
          canSendNotification={canSendNotification}
          sendPushNotification={sendPushNotification}
          setSendPushNotification={setSendPushNotification}
        />
      )}
    </View>
  );
}

export default SchedulePost;