// Hooks
import { useStore } from 'stores/StoreProvider';
import { observer } from 'mobx-react-lite';
import { FC, useMemo } from 'react';

// Types
import { RootStore } from 'stores/RootStore';
import { FormInstance } from 'antd/lib/form';

// Components
import { Button } from 'antd';
import EditAndSaveButton from './EditAndSaveButton';
import moment from 'moment';

// Styles
import styles from 'pages/EventsJournalDashboard/EventCardInfo.module.scss';
import { TIncidentCardInfoMessages } from '../types';

type TypeNCIRCCOpenButton = 'send' | 'show' | 'addition';

type TypeDrawerHeaderProps = {
  form: FormInstance;
  translation: Omit<TIncidentCardInfoMessages, 'formItem'>;
};

export const DrawerHeader: FC<TypeDrawerHeaderProps> = observer(
  ({ form, translation }) => {
    // Store
    const rootStore: RootStore = useStore();
    const incidentsUiStore = rootStore.incidentsUiStore;
    const incidentsStore = rootStore.incidentsStore;
    const ncirccStore = rootStore.ncirccStore;

    const { drawerButtonOpen } = translation;

    const notificationMessage: { [key in TypeNCIRCCOpenButton]: string } = {
      send: drawerButtonOpen.send,
      show: drawerButtonOpen.show,
      addition: drawerButtonOpen.additional,
    };

    const isDisabled = (): boolean => {
      if (!ncirccStore.isCompanyInformation) {
        return true;
      } else {
        return (
          !ncirccStore.notification?.update_time &&
          !ncirccStore.isCompanyInformation
        );
      }
    };

    const createdNotificationStatus = useMemo((): string => {
      if (
        ncirccStore.notification?.created ||
        ncirccStore.notification?.update_time
      ) {
        return drawerButtonOpen.correctTime(
          moment(
            ncirccStore.notification?.update_time ||
              ncirccStore.notification?.created,
          ).format('DD.MM.YYYY HH:mm'),
        );
      } else if (
        !ncirccStore.notification?.update_time &&
        !ncirccStore.isCompanyInformation
      ) {
        return drawerButtonOpen.createCompany;
      } else if (ncirccStore.notification?.update_time === 'Invalid date') {
        return drawerButtonOpen.invalidTime;
      } else {
        return drawerButtonOpen.ifNoSend;
      }
    }, [
      drawerButtonOpen,
      ncirccStore.isCompanyInformation,
      ncirccStore.notification?.created,
      ncirccStore.notification?.update_time,
    ]);

    return (
      <div className={styles['cardHeader']}>
        <span className={styles['cardHeader_title']}>{`Incident: ${
          !incidentsStore.isIncidentLoading
            ? incidentsStore.incident?.user_friendly_id
            : ''
        }`}</span>
        <div className={styles['cardHeader_date']}>
          {incidentsUiStore.incidentCardSize === 'small' &&
            !incidentsStore.isIncidentLoading &&
            incidentsStore.incident?.updated}
        </div>
        <div className={styles['cardHeader_icon-block']}>
          {incidentsUiStore.incidentCardSize === 'large' && (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div
                style={{
                  height: 32,
                  display: 'flex',
                  flexDirection: 'column',
                  marginRight: 20,
                  textAlign: 'center',
                }}
              >
                <Button
                  onClick={() => {
                    incidentsUiStore.setNcirccNotificationCard('small');
                  }}
                  type="primary"
                  disabled={isDisabled()}
                >
                  {notificationMessage[ncirccStore.isAdditionNotification]}
                </Button>

                <p style={{ fontSize: 12 }}>{createdNotificationStatus}</p>
              </div>
              <div style={{ marginRight: 20 }}>
                <EditAndSaveButton form={form} translation={translation} />
              </div>
            </div>
          )}
        </div>
      </div>
    );
  },
);
