dwqdwq

import React from 'react';
import { useTranslation } from 'react-i18next';
import { App, Col, Row, Typography } from 'antd';
import { CheckOutlined, WarningOutlined } from '@ant-design/icons';
import { CloseIcon, InfoIcon } from 'components/icons';
import { useDate } from './useDate';

const defaultNotificationProps = {
  duration: 3,
  placement: 'topRight',
  style: { borderRadius: '10px', width: '355px', zIndex: '999' },
  closeIcon: <CloseIcon color="#ffffff" width="10" height="10" />
};

const { Text } = Typography;

/**
 * Notificaciones de ANTD con la configuración predeterminada usada en la app
 * @returns
 */
const useNotification = () => {
  const { notification } = App.useApp();
  const { t } = useTranslation('translations');
  const { format } = useDate();

  /* FUNCTIONS EXPORTED */
  /**
   *
   * @param {string} message
   * @param {Partial<import('antd/lib/notification').ArgsProps>} options
   */
  const openErrorNotification = (message = t('msg-alert.msg_error'), options = {}) => {
    if (typeof message !== 'string') {
      message = t('msg-alert.msg_error');
    }
    notification.error({
      ...defaultNotificationProps,
      ...options,
      message: <Text style={{ color: 'white' }}>{message}</Text>,
      style: {
        ...defaultNotificationProps.style,
        ...(options?.style ?? {}),
        color: '#ffff',
        backgroundColor: '#FF4D4D'
      },
      icon: <WarningOutlined style={{ color: 'white' }} />
    });
  };

  /**
   *
   * @param {string} message
   */
  const openSuccessNotification = (message = t('msg-alert.msg_exitoso')) => {
    if (typeof message !== 'string') {
      message = t('msg-alert.msg_exitoso');
    }
    notification.success({
      ...defaultNotificationProps,
      message: <Text style={{ color: 'white' }}>{message}</Text>,
      style: { ...defaultNotificationProps.style, backgroundColor: '#02BF80' },
      icon: <CheckOutlined style={{ color: 'white' }} />
    });
  };

  /**
   *
   * @param {string} message
   * @param {import('antd/lib/notification').ArgsProps} options
   */
  const openInfoNotification = (message = t('msg-alert.msg_error'), options = {}) => {
    const { icon, ...restOptions } = options;
    if (typeof message !== 'string') {
      message = t('msg-alert.msg_error');
    }
    notification.info({
      ...defaultNotificationProps,
      ...restOptions,
      message: <Text style={{ color: 'white' }}>{message}</Text>,
      style: { ...defaultNotificationProps.style, backgroundColor: '#3867FC' },
      icon: icon ?? <InfoIcon />,
      description: <Text style={{ color: 'white' }}>{options?.description}</Text>
    });
  };

  const openEmergencyNotification = (emergencyBody = {}, stack = {}) => {
    const notificationOptions = stack?.threshold
      ? {
          stack: {
            threshold: stack.threshold
          }
        }
      : {};

    notification.open({
      ...defaultNotificationProps,
      ...notificationOptions,
      duration: 3,
      message: (
        <Row style={{ width: '355px' }}>
          <Col style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} span={4}>
            <WarningOutlined style={{ color: 'var(--primary-color-contrast)', fontSize: '36px' }} />
          </Col>
          <Col style={{ display: 'flex', flexDirection: 'column' }} span={20}>
            <Text style={{ fontWeight: 'bold', color: 'var(--primary-color-contrast)' }}>
              {emergencyBody?.sourceName ?? t('advance-queries.no_data')}
            </Text>
            <Text style={{ color: 'var(--primary-color-contrast)' }}>
              {emergencyBody?.subTypeName ?? t('advance-queries.no_data')}
            </Text>
            <Text style={{ color: 'var(--primary-color-contrast)' }}>
              {emergencyBody?.folio ?? t('advance-queries.no_data')}
            </Text>
            <Text style={{ color: 'var(--primary-color-contrast)' }}>
              {emergencyBody?.createdAt ? format(emergencyBody?.createdAt) : t('advance-queries.no_data')}
            </Text>
          </Col>
        </Row>
      ),
      style: {
        ...defaultNotificationProps.style,
        backgroundColor: 'var(--primary-color-main)',
        cursor: 'pointer',
        padding: '5px 10px'
      }
    });
  };

  const operReverVehicleNotification = (recoverData = {}) => {
    notification.open({
      ...defaultNotificationProps,
      duration: 10,
      message: (
        <Row style={{ width: '355px' }}>
          <Col style={{ display: 'flex', flexDirection: 'column' }} span={20}>
            <Text style={{ color: 'var(--primary-color-contrast)' }}>
              {recoverData?.folio
                ? t('notification_alerts.vehicle_recovered_notification', {
                    folio: recoverData.folio,
                    userName: recoverData.userCad || ''
                  })
                : t('advance-queries.no_data')}
            </Text>
          </Col>
        </Row>
      ),
      style: {
        ...defaultNotificationProps.style,
        backgroundColor: 'var(--primary-color-main)',
        cursor: 'pointer',
        padding: '5px 10px'
      }
    });
  };

  const destroyAllNotifications = () => {
    notification.destroy();
  };
  /**
   *
   * @param {string} key
   */
  const destroyNotification = (key) => {
    if (typeof key !== 'string') return;
    notification.destroy(key);
  };

  return {
    openErrorNotification,
    openSuccessNotification,
    openInfoNotification,
    openEmergencyNotification,
    destroyAllNotifications,
    destroyNotification,
    operReverVehicleNotification
  };
};

export { useNotification };