import {useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Alert, AlertVariant, Typography} from '@components';
import {getVariantShape} from '@components/_HuGo/Alert/styles';
import {BlockedDatesErrorPayload} from '@modules/timeOff/interfaces';
import {getBlockedDatesMessages} from '@modules/timeOff/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  blockedDates: Nullable<BlockedDatesErrorPayload>;
  variant?: AlertVariant;
}

function BlockedDatesMessage({blockedDates, variant = 'error'}: Props) {
  const {t, i18n} = useTranslation();
  const {theme} = useTheme();

  const {title, messages} = useMemo(() => {
    if (!blockedDates) {
      return {title: '', messages: []};
    }

    const blockedDatesMessages = getBlockedDatesMessages(
      blockedDates,
      i18n.language,
      t,
    );

    return {
      title: t('time_off.blocked_dates_error_title'),
      messages: blockedDatesMessages,
    };
  }, [blockedDates, i18n.language, t]);

  if (!blockedDates || !messages.length) {
    return null;
  }

  const {textColor} = getVariantShape(variant, theme);

  const renderDescription = () => {
    if (messages.length === 1) {
      const lines = messages[0].split('\n');
      return (
        <View>
          <Typography variant="xs" color={textColor}>
            {lines[0]}
          </Typography>
          {lines.slice(1).map((line, lineIndex) => (
            <Typography
              key={`line-${lineIndex}-${line.substring(0, 10)}`}
              variant="xs"
              color={textColor}>
              {line}
            </Typography>
          ))}
        </View>
      );
    }

    return (
      <View>
        {messages.map((message, messageIndex) => {
          const lines = message.split('\n');
          const messageKey = `message-${messageIndex}`;
          return (
            <View
              key={messageKey}
              style={
                messageIndex < messages.length - 1
                  ? styles.messageSpacing
                  : styles.messageContainer
              }>
              <View style={styles.bulletLine}>
                <Typography variant="xs" color={textColor}>
                  •{'  '}
                </Typography>
                <Typography
                  variant="xs"
                  color={textColor}
                  style={styles.textLine}>
                  {lines[0]}
                </Typography>
              </View>
              {lines.slice(1).map((line, lineIndex) => (
                <View
                  key={`${messageKey}-line-${lineIndex}`}
                  style={styles.bulletLine}>
                  <Typography
                    variant="xs"
                    color={textColor}
                    style={styles.bulletSpacer}>
                    •{' '}
                  </Typography>
                  <Typography
                    variant="xs"
                    color={textColor}
                    style={styles.textLine}>
                    {line + '.'}
                  </Typography>
                </View>
              ))}
            </View>
          );
        })}
      </View>
    );
  };

  return (
    <Alert title={title} variant={variant} description={renderDescription()} />
  );
}

export default BlockedDatesMessage;