// Antd
import { Card, Tag } from 'antd';

//Types
import { NCIRCCNotifictionRetrive, NotificationStatusEnum } from 'myApi';
import { RootStore } from 'stores/RootStore';

// Apps
import { StatusWithButtonUuid } from 'pages/NCIRCCDashboard/components';
import { observer } from 'mobx-react-lite';
import { useStore } from 'stores/StoreProvider';
import moment from 'moment';
import classNames from 'classnames';

// Styles
import styles from './NCIRCCNotification.module.scss';
import { FC } from 'react';

type TypeNCIRCCNotificationProps = {
  message: NCIRCCNotifictionRetrive;
};

export const NCIRCCNotification: FC<TypeNCIRCCNotificationProps> = observer(
  ({ message }) => {
    const rootStore: RootStore = useStore();
    const ncirccUiStore = rootStore.ncirccUiStore;
    const incidentsUiStore = rootStore.incidentsUiStore;

    const onOpenMessageContent = async (): Promise<void> => {
      if (message.incident) {
        await incidentsUiStore.fetchSelectedIncident(message.incident);
        incidentsUiStore.setIncidentCardSize('small');
      }
    };

    const widthNotificationIsVisibleMessenger = !ncirccUiStore.messageCardSize
      ? { width: '100%' }
      : { width: '70%' };

    const colorMapNotificationStatus = {
      [NotificationStatusEnum.TypeПроверкаНКЦКИ]: 'magenta',
      [NotificationStatusEnum.TypeСоздано]: 'lime',
      [NotificationStatusEnum.TypeЗарегистрировано]: 'blue',
      [NotificationStatusEnum.TypeТребуетсяДополнение]: 'orange',
      [NotificationStatusEnum.TypeПринятоРешение]: 'green',
      [NotificationStatusEnum.TypeОтправленоВАрхив]: 'purple',
    };

    return (
      <Card.Grid
        key={message.id}
        onClick={() => {
          if (message.id) {
            ncirccUiStore.onShowMessage(message.id);
          }
        }}
        style={widthNotificationIsVisibleMessenger}
        className={styles.notification}
      >
        <div
          style={{
            display: 'flex',
            flexDirection: ncirccUiStore.messageCardSize ? 'column' : 'row',
            alignItems: 'baseline',
          }}
        >
          <StatusWithButtonUuid
            handleOpenIncidentInfo={onOpenMessageContent}
            category={message.category}
            uuid={message.uuid}
          />
        </div>

        <div className={classNames(styles['right-content'])}>
          <Tag
            color={
              message.notification_status
                ? colorMapNotificationStatus[message.notification_status]
                : 'red'
            }
          >
            {message.notification_status}
          </Tag>
          <strong>
            {moment(message.sending_time).format('DD.MM.YYYY HH:mm')}
          </strong>
        </div>
      </Card.Grid>
    );
  },
);
