import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconMinus, IconPlus} from '@tabler/icons-react-native';
import {Alert, IconButton, Typography} from '@components';
import {SetState} from '@interfaces/generic';
import {
  MAX_PREVIEW_DAYS,
  MIN_PREVIEW_DAYS,
} from '@modules/keyUpdates/screens/PublishKeyUpdate/constants';
import {getFullDateWithTime} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  previewDays: number;
  setPreviewDays: SetState<number>;
  previewExpiresAt: string;
}

function PreviewConfig({previewDays, setPreviewDays, previewExpiresAt}: Props) {
  const {theme} = useTheme();
  const {t} = useTranslation();

  const onDecreasePreviewDays = () => setPreviewDays(prev => prev - 1);
  const onIncreasePreviewDays = () => setPreviewDays(prev => prev + 1);

  return (
    <>
      <View style={styles.dateContainer}>
        <View style={styles.dateTextContainer}>
          <Typography variant="xxs" color={theme.text.neutral.lighter}>
            {t('post.show_preview_end_date')}
          </Typography>
          <Typography variant="s" weight="semiBold" numberOfLines={2}>
            {getFullDateWithTime(previewExpiresAt, false)}
          </Typography>
        </View>
        <View style={styles.previewControlsContainer}>
          <Typography variant="s" weight="semiBold">
            {t('general.count_day', {count: previewDays})}
          </Typography>
          <View style={styles.buttonsContainer}>
            <IconButton
              Icon={IconMinus}
              onPress={onDecreasePreviewDays}
              variant="secondary"
              disabled={previewDays === MIN_PREVIEW_DAYS}
            />
            <IconButton
              Icon={IconPlus}
              onPress={onIncreasePreviewDays}
              variant="secondary"
              disabled={previewDays === MAX_PREVIEW_DAYS}
            />
          </View>
        </View>
      </View>
      <Alert
        title={t('post.key_updates_preview_alert_title')}
        description={t('post.key_updates_preview_alert_description')}
        withClose
      />
    </>
  );
}

export default PreviewConfig;