// Libs
import React, { FC } from 'react';
import { FormProps, Row, Col } from 'antd';

// Types
import { TypeCardInfoSensorMessages } from 'pages/DevicesDashboard/types';
import { TypeCommonValidationMessages } from 'components/i18n';
import { SensorDevice } from 'myApi';
import { FormInstance } from 'antd/lib/form';
import { RootStore } from 'stores/RootStore';

// Apps
import { observer } from 'mobx-react-lite';
import { useSensorFormConfiguration } from './useSensorFormConfiguration';
import { useStore } from 'stores/StoreProvider';
import { FormFieldsBlock } from 'components';

// Styles
import styles from '../DevicesCardInfo.module.scss';

export type SensorFormProps = FormProps & {
  locale: TypeCardInfoSensorMessages;
  localeValidation: TypeCommonValidationMessages;
  form: FormInstance<SensorDevice>;
};
export const SensorForm: FC<SensorFormProps> = observer(
  ({ locale, localeValidation, form }): JSX.Element => {
    const rootStore: RootStore = useStore();
    const devicesUiStore = rootStore.devicesUiStore;
    const sensorStore = rootStore.sensorStore;

    const {
      // Имя
      name,

      // IP
      ip,

      // Порт
      port,

      // Авторизационная строка
      authorizationKey,

      // Группа
      group,

      // Дополнительная информация ( Описание )
      description,

      // Интерфейс получения событий
      spanInterfaceName,

      // Включить сигнатурный анализ
      signatureAnalysis,

      // Включить анализ протоколов DPI
      protocolsAnalysis,
    } = useSensorFormConfiguration(locale, localeValidation, form);

    const formItems: {
      mainFields: JSX.Element[];
      interfaceFields: JSX.Element[];
      networkTrafficAnalyzers: JSX.Element[];
    } = {
      // Блок полей всегда отображаемый
      mainFields: [name, ip, port, authorizationKey],

      // Блок полей отображаемые при подключении к сенсору и имеющие статус online
      interfaceFields: [],
      networkTrafficAnalyzers: [],
    };

    if (sensorStore.getSensorDetailById?.status?.status === 'online') {
      formItems.mainFields.push(group, description);

      formItems.interfaceFields.push(spanInterfaceName);

      formItems.networkTrafficAnalyzers.push(
        signatureAnalysis,
        protocolsAnalysis,
      );
    }

    return (
      <div className={styles['content']}>
        <FormFieldsBlock title={locale.main.title}>
          <Row gutter={[24, 0]}>
            {formItems.mainFields.map((field, index) => {
              return (
                <Col
                  key={index}
                  span={devicesUiStore.cardSize === 'large' ? 8 : 24}
                >
                  {field}
                </Col>
              );
            })}
          </Row>
        </FormFieldsBlock>
        {formItems.interfaceFields?.length > 0 && (
          <FormFieldsBlock title={locale.interfaceFields.title}>
            <Row gutter={[24, 0]}>
              {formItems.interfaceFields.map((field, index) => {
                return (
                  <Col
                    key={index}
                    span={devicesUiStore.cardSize === 'large' ? 8 : 24}
                  >
                    {field}
                  </Col>
                );
              })}
            </Row>
          </FormFieldsBlock>
        )}
        {formItems.networkTrafficAnalyzers?.length > 0 && (
          <FormFieldsBlock title={locale.networkTrafficAnalyzers.title}>
            <Row gutter={[24, 0]}>
              {formItems.networkTrafficAnalyzers.map((field, index) => {
                return (
                  <Col
                    key={index}
                    span={devicesUiStore.cardSize === 'large' ? 8 : 24}
                  >
                    {field}
                  </Col>
                );
              })}
            </Row>
          </FormFieldsBlock>
        )}
      </div>
    );
  },
);
