import React, {useMemo, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {SafeAreaView} from 'react-native-safe-area-context';
import {
  Typography,
  InputDate,
  InputTime,
  Footer,
  Button,
  Checkbox,
} from '@components';
import {useTheme} from '@shared/theme';
import {commonStyles} from '@shared/styles';
import {
  addDays,
  addHours,
  isBefore,
  roundToNearestMinutes,
} from '@shared/utils';

import {styles} from './styles';

interface ScheduleComponentProps {
  scheduleDateTime?: Date;
  onSubmit: (date: Date, sendNotification?: boolean) => void;
  showNotificationCheckbox?: boolean;
  showNotificationDefaultValue?: boolean;
  isLoading?: boolean;
}

const ScheduleComponent = ({
  scheduleDateTime,
  onSubmit,
  showNotificationCheckbox,
  showNotificationDefaultValue,
  isLoading,
}: ScheduleComponentProps) => {
  const {t} = useTranslation();
  const {theme} = useTheme();

  const [showNotification, setShowNotification] = useState(
    showNotificationDefaultValue ?? false,
  );

  const [scheduleDate, setScheduleDate] = useState<Date>(
    scheduleDateTime ?? addDays(new Date(), 1),
  );
  const [scheduleTime, setScheduleTime] = useState<Date>(
    scheduleDateTime ??
      roundToNearestMinutes(addHours(new Date(), 1), {nearestTo: 10}),
  );
  const scheduledDate = useMemo(() => {
    const date = new Date(scheduleDate);
    date.setHours(scheduleTime.getHours());
    date.setMinutes(scheduleTime.getMinutes());
    return date;
  }, [scheduleDate, scheduleTime]);
  const isBeforeNow = isBefore(scheduledDate, new Date());
  const onSubmitPress = () => onSubmit(scheduledDate, showNotification);
  const onShowNotificationChange = () => setShowNotification(!showNotification);

  return (
    <SafeAreaView
      edges={['bottom']}
      style={[
        commonStyles.flex,
        {backgroundColor: theme.background.elements.grey},
      ]}>
      <View
        style={[
          styles.container,
          {backgroundColor: theme.background.elements.default},
        ]}>
        <Typography>{t('post.choose_future_date_time')}</Typography>
        <InputDate
          label={t('post.date')}
          value={scheduleDate}
          onChange={setScheduleDate}
          placeholder={t('post.choose_future_date')}
        />
        <InputTime
          label={t('post.time')}
          placeholder={'HH:MM'}
          value={scheduleTime}
          minuteInterval={10}
          onChange={setScheduleTime}
        />
        {isBeforeNow && (
          <Typography color={theme.text.feedback.error}>
            {t('post.schedule_date_error')}
          </Typography>
        )}
        {showNotificationCheckbox && (
          <Checkbox
            title={t('post.send_push')}
            checked={showNotification}
            onPress={onShowNotificationChange}
          />
        )}
      </View>
      <Footer>
        <Button
          onPress={onSubmitPress}
          text={t('post.schedule')}
          isLoading={!!isLoading}
          disabled={!scheduleDate || !scheduleTime || isBeforeNow}
        />
      </Footer>
    </SafeAreaView>
  );
};

export default ScheduleComponent;
