// Components
import { FireWallForm } from './Firewall';
import { EndpointForm } from './Endpoint';
import { SensorForm } from './Sensor';
import { SelectorAddNewEventSource } from './SelectorAddNewEventSource';

// Hooks
import { useEventsJournalMessages } from 'pages/EventsJournalDashboard/i18n';
import { useStore } from 'stores/StoreProvider';

// Apps
import { observer } from 'mobx-react-lite';

// Antd
import { Form } from 'antd';

// Types
import React, { FC } from 'react';
import { GeneralFormProps } from './types';
import { RootStore } from 'stores/RootStore';

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

export const GeneralForm: FC<GeneralFormProps> = observer(
  ({ form, onFinish, locale, localeValidation }) => {
    const { table } = useEventsJournalMessages();

    const rootStore: RootStore = useStore();
    const devicesUiStore = rootStore.devicesUiStore;

    const content = (): React.ReactNode => {
      switch (devicesUiStore.typeSelectedDevice) {
        case 'firewall':
          return (
            <FireWallForm
              form={form}
              locale={locale.firewall}
              localeValidation={localeValidation}
            />
          );
        case 'endpoint':
          return (
            <EndpointForm
              form={form}
              locale={locale.endpoint}
              localeValidation={localeValidation}
              tableTranslations={table}
            />
          );
        case 'sensor':
          return (
            <SensorForm
              form={form}
              locale={locale.sensor}
              localeValidation={localeValidation}
            />
          );
        default:
          return null;
      }
    };

    return (
      <Form
        form={form}
        className={devicesStyles['custom-form']}
        colon={false}
        key="deviceForm"
        name="deviceForm"
        onFinish={onFinish}
        labelCol={
          devicesUiStore.cardSize === 'small' ? { span: 8 } : { span: 16 }
        }
        scrollToFirstError
        labelAlign="left"
        layout={devicesUiStore.cardSize === 'small' ? 'horizontal' : 'vertical'}
      >
        {!form.getFieldValue('id') && !devicesUiStore.isCopyEndpointStatus ? (
          <>
            <SelectorAddNewEventSource
              locale={{
                type: locale.type,
                validation: locale.typeSelector.validation,
                placeholder: locale.typeSelector.placeholder,
              }}
            />
            {content()}
          </>
        ) : (
          content()
        )}
      </Form>
    );
  },
);
