// Libs
// -----------------------------------------------------------------------------
import React, { FC, Fragment } from 'react';
import { Form, Input, Row, Col, Select } from 'antd';
import { Rule } from 'antd/lib/form';
import { observer } from 'mobx-react-lite';

// App
// -----------------------------------------------------------------------------
import { CommonActionFormProps } from './CommonActionFormProps';
import { ForeignKeyEntitiesTable } from 'components';
import { useStore } from 'stores/StoreProvider';
import { RootStore } from 'stores/RootStore';
import { EnumAssetType } from 'types/default';
import { validateMultiplePortsAsJsonString } from 'components/formValidators';
import { useCommonMessages } from 'components/i18n';
import { useCorrelationRulesTemplateMessages } from '../../i18n';
import { makeListForSelectWithNull } from 'components/helpers';

export const AssetActionForm: FC<CommonActionFormProps> = observer(
  ({ name, isDisabled, cardSize }) => {
    const rootStore: RootStore = useStore();
    const assetsOsesStore = rootStore.assetsOsesStore;
    const assetsManufacturersStore = rootStore.assetsManufacturersStore;
    const assetsGroupStore = rootStore.assetsGroupsStore;

    const locale = useCorrelationRulesTemplateMessages();
    const fieldStrings =
      locale.actionsRuleMessage.blockMessages.newAssetsMessage;
    const fieldRules: Array<Rule> = [
      { required: true, message: locale.formValidationMessages.emptyField },
    ];

    const formValidatorsMessages = useCommonMessages().formValidators;

    return (
      <Fragment>
        <Form.Item name={[name, 'type']} rules={fieldRules} hidden>
          <Input type="hidden" disabled={isDisabled} />
        </Form.Item>

        <Row gutter={[32, 0]}>
          <Col span={cardSize === 'large' ? 8 : 24}>
            <Form.Item
              name={[name, 'name']}
              label={fieldStrings.name.title}
              rules={fieldRules}
            >
              <Input
                placeholder={fieldStrings.name.placeholder}
                disabled={isDisabled}
              />
            </Form.Item>
          </Col>

          <Col span={cardSize === 'large' ? 8 : 24}>
            <Form.Item
              name={[name, 'asset_type']}
              label={fieldStrings.assetType.title}
            >
              <Select
                placeholder={fieldStrings.assetType.placeholder}
                disabled={isDisabled}
                options={[
                  { value: undefined, label: '----' },
                  {
                    value: EnumAssetType.User,
                    label: fieldStrings.assetTypeValue.user,
                  },
                  {
                    value: EnumAssetType.ArmaIndustrialFirewall,
                    label: fieldStrings.assetTypeValue.arma_industrial_firewall,
                  },
                  {
                    value: EnumAssetType.PLC,
                    label: fieldStrings.assetTypeValue.plc,
                  },
                  {
                    value: EnumAssetType.PC,
                    label: fieldStrings.assetTypeValue.pc,
                  },
                  {
                    value: EnumAssetType.Server,
                    label: fieldStrings.assetTypeValue.server,
                  },
                  {
                    value: EnumAssetType.NetworkDevice,
                    label: fieldStrings.assetTypeValue.network_device,
                  },
                ]}
              />
            </Form.Item>
          </Col>

          <Col span={cardSize === 'large' ? 8 : 24}>
            <Form.Item name={[name, 'group']} label={fieldStrings.group.title}>
              <Select
                placeholder={fieldStrings.group.placeholder}
                disabled={isDisabled}
                options={makeListForSelectWithNull(assetsGroupStore.list)}
              />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={[32, 0]}>
          <Col span={24}>
            <Form.Item
              name={[name, 'description']}
              label={fieldStrings.description.title}
            >
              <Input.TextArea
                placeholder={fieldStrings.description.placeholder}
                disabled={isDisabled}
                rows={5}
              />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={[32, 0]}>
          <Col span={cardSize === 'large' ? 8 : 24}>
            <Form.Item label={fieldStrings.manufacturer.title}>
              <Input.Group compact>
                <Form.Item name={[name, 'manufacturer']} noStyle>
                  <Select
                    options={makeListForSelectWithNull(
                      assetsManufacturersStore.list,
                    )}
                    disabled={isDisabled}
                    style={{ width: 'calc(100% - 31px)' }}
                    placeholder={fieldStrings.manufacturer.placeholder}
                  />
                </Form.Item>
                <ForeignKeyEntitiesTable
                  title={fieldStrings.manufacturer.title}
                  dataStore={assetsManufacturersStore}
                  isDisabled={isDisabled}
                />
              </Input.Group>
            </Form.Item>
          </Col>

          <Col span={cardSize === 'large' ? 8 : 24}>
            <Form.Item name={[name, 'model']} label={fieldStrings.model.title}>
              <Input
                placeholder={fieldStrings.model.placeholder}
                disabled={isDisabled}
              />
            </Form.Item>
          </Col>

          <Col span={cardSize === 'large' ? 8 : 24}>
            <Form.Item label={fieldStrings.os.title}>
              <Input.Group compact>
                <Form.Item name={[name, 'os']} noStyle>
                  <Select
                    options={makeListForSelectWithNull(assetsOsesStore.list)}
                    disabled={isDisabled}
                    style={{ width: 'calc(100% - 31px)' }}
                    placeholder={fieldStrings.os.placeholder}
                  />
                </Form.Item>
                <ForeignKeyEntitiesTable
                  title={fieldStrings.os.title}
                  dataStore={assetsOsesStore}
                  isDisabled={isDisabled}
                />
              </Input.Group>
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={[32, 0]}>
          <Col span={cardSize === 'large' ? 12 : 24}>
            <Form.Item
              name={[name, 'ip']}
              label={fieldStrings.ip.title}
              rules={fieldRules}
            >
              <Input
                placeholder={fieldStrings.ip.placeholder}
                disabled={isDisabled}
              />
            </Form.Item>
          </Col>

          <Col span={cardSize === 'large' ? 12 : 24}>
            <Form.Item
              name={[name, 'ports']}
              label={fieldStrings.ports.title}
              rules={[
                {
                  message: formValidatorsMessages.badPortsJson,
                  validator: validateMultiplePortsAsJsonString,
                },
              ]}
            >
              <Input
                placeholder={fieldStrings.ports.placeholder}
                disabled={isDisabled}
              />
            </Form.Item>
          </Col>
        </Row>
      </Fragment>
    );
  },
);
