import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import DatePicker from 'react-native-date-picker';
import Button from '@components/Button';
import Text from '@components/Text';
import Checkbox from '@components/Checkbox';
import i18next from '@config/i18n';
import {SetState} from '@interfaces/generic';
import {SHARED_STRINGS} from '@shared/strings';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

interface Props {
  scheduleDateTime: Date;
  setScheduleDateTime: SetState<Date>;
  error?: boolean;
  onSuccess: () => void;
  onCancel?: () => void;
  editing?: boolean;
  canSendNotification: boolean;
  sendPushNotification: boolean;
  setSendPushNotification: SetState<boolean>;
}

function ChooseDateTime({
  scheduleDateTime,
  setScheduleDateTime,
  error,
  onSuccess,
  onCancel,
  editing,
  canSendNotification,
  sendPushNotification,
  setSendPushNotification,
}: Props) {
  const {t} = useTranslation();
  const onToggleNotification = () => {
    setSendPushNotification(
      prevSendPushNotification => !prevSendPushNotification,
    );
  };

  return (
    <>
      <Text variant="h6" style={styles.title}>
        {t(editing ? 'post.choose_date_time' : 'post.schedule_post')}
      </Text>
      <Text variant="subtitle2" color={COLORS.DARKEST_GRAY}>
        {t('post.choose_future_date_time')}
      </Text>
      <DatePicker
        date={scheduleDateTime}
        style={styles.datePicker}
        mode="datetime"
        onDateChange={setScheduleDateTime}
        locale={i18next.language}
        theme="light"
        minuteInterval={10}
      />
      {error && (
        <Text variant="error" style={!canSendNotification && styles.error}>
          {t('post.schedule_date_error')}
        </Text>
      )}
      {canSendNotification && (
        <Checkbox
          onPress={onToggleNotification}
          checked={sendPushNotification}
          title={t('post.send_push')}
          textVariant="body1"
          textStyle={styles.checkboxText}
          color={sendPushNotification ? COLORS.PRIMARY : COLORS.BLACK}
          containerStyle={styles.checkboxContainer}
        />
      )}
      {editing ? (
        <View>
          <Button
            onPress={onSuccess}
            disabled={error}
            text={t('post.choose_date_time')}
          />
          <Button
            variant="text"
            onPress={onCancel}
            style={styles.cancelButton}
            text={t(SHARED_STRINGS.CANCEL)}
          />
        </View>
      ) : (
        <Button
          onPress={onSuccess}
          disabled={error}
          text={t('post.schedule_post')}
        />
      )}
    </>
  );
}

export default ChooseDateTime;