// Libs
// -----------------------------------------------------------------------------
import React, { FC, useEffect } from 'react';
import { Spin, Card, Descriptions, DescriptionsProps } from 'antd';
import moment from 'moment';
import { observer } from 'mobx-react-lite';

// App
// -----------------------------------------------------------------------------
import styles from './LicensePage.module.scss';
import Layout, { LeftSidebar, makeLeftSidebarContent } from 'components/Layout';
import { Page } from 'pages/AppRoutes/constants';
import { TCommonMessages, useCommonMessages } from 'components/i18n';
import { RootStore } from 'stores/RootStore';
import { useStore } from 'stores/StoreProvider';
import { useLicensePageLocale } from './i18n';

export const LicensePage: FC = observer(() => {
  // Общая локализация
  const commonLocale: TCommonMessages = useCommonMessages();

  // Локализация страницы
  const pageLocale = useLicensePageLocale();

  // Содержимое боковой панели
  const leftSideBarContent = makeLeftSidebarContent(
    Page.LICENSE_CURRENT,
    commonLocale.leftSidebar,
  );

  // Корневой стор
  const rootStore: RootStore = useStore();

  // Стор страницы
  const pageStore = rootStore.licenseStore;

  // При открытии страницы получить лицензию, если она еще не загружена в стор
  useEffect(() => {
    // TODO: Возможно надо вынести на уровень App,
    //  если информация о лицензии будет нужна в других местах
    if (!pageStore.license) {
      pageStore.fetchLicense();
    }
  }, [pageStore]);

  // Общие поля блоков описания
  const commonDescriptionsProps: DescriptionsProps = {
    layout: 'vertical',
    column: 3,
    labelStyle: { fontWeight: 600 },
    colon: false,
  };

  const license = pageStore.license?.license;
  const features = pageStore.license?.features;
  const options = pageStore.license?.options;

  // Локализованные название и описание свойства лицензии индексированные по
  // английскому названию, приходящему с бэкенда
  const localizedPropertiesByEnglishName: {
    [name: string]: { name: string; description: string };
  } = {
    'Event processing': {
      name: pageLocale.eventProcessingName,
      description: pageLocale.eventProcessingDescription,
    },
    'Event sources': {
      name: pageLocale.eventSourcesName,
      description: pageLocale.eventSourcesDescription,
    },
    'Incident processing': {
      name: pageLocale.incidentProcessingName,
      description: pageLocale.incidentProcessingDescription,
    },
  };

  return (
    <Layout>
      <div className={styles['page']}>
        <LeftSidebar leftSideBarContent={leftSideBarContent} />

        <div className={styles['content']}>
          <Spin spinning={pageStore.isLoading}>
            <Card title={pageLocale.licenseInfo} className={styles['card']}>
              <Descriptions {...commonDescriptionsProps}>
                <Descriptions.Item label={pageLocale.type}>
                  {license?.type ?? '—'}
                </Descriptions.Item>

                <Descriptions.Item label={pageLocale.product}>
                  {license?.product
                    ? license.product === 'ARMA Console'
                      ? 'ARMA Management Console'
                      : license.product
                    : '—'}
                </Descriptions.Item>

                <Descriptions.Item label={pageLocale.customer}>
                  {license?.customer ?? '—'}
                </Descriptions.Item>

                <Descriptions.Item label={pageLocale.evaluationStart}>
                  {license?.evaluationStart
                    ? moment(license.evaluationStart).format('DD.MM.YYYY')
                    : '—'}
                </Descriptions.Item>

                <Descriptions.Item label={pageLocale.evaluationEnd}>
                  {license?.evaluationEnd
                    ? moment(license.evaluationEnd).format('DD.MM.YYYY')
                    : '—'}
                </Descriptions.Item>
              </Descriptions>
            </Card>

            <Card title={pageLocale.licenseFeatures} className={styles['card']}>
              {Array.isArray(features) && features.length > 0 ? (
                <Descriptions {...commonDescriptionsProps}>
                  {features.map((feature) => {
                    const name =
                      localizedPropertiesByEnglishName?.[feature.name]?.name ??
                      feature.name;

                    const description =
                      localizedPropertiesByEnglishName?.[feature.name]
                        ?.description ?? feature.description;

                    return (
                      <Descriptions.Item label={name} key={name}>
                        {description}
                      </Descriptions.Item>
                    );
                  })}
                </Descriptions>
              ) : (
                pageLocale.noFeaturesDefined
              )}
            </Card>

            <Card title={pageLocale.licenseOptions} className={styles['card']}>
              {Array.isArray(options) && options.length > 0 ? (
                <Descriptions {...commonDescriptionsProps}>
                  {options.map((option) => {
                    const name =
                      localizedPropertiesByEnglishName?.[option.name]?.name ??
                      option.name;

                    const description =
                      localizedPropertiesByEnglishName?.[option.name]
                        ?.description ?? option.description;

                    const value = option.value;

                    return (
                      <Descriptions.Item
                        label={name}
                        key={name}
                        contentStyle={{ display: 'inline-block' }}
                      >
                        {pageLocale.value}: <span>{value}</span>
                        <br />
                        {pageLocale.description}: <span>{description}</span>
                      </Descriptions.Item>
                    );
                  })}
                </Descriptions>
              ) : (
                pageLocale.noOptionsDefined
              )}
            </Card>
          </Spin>
        </div>
      </div>
    </Layout>
  );
});
