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

// App
// -----------------------------------------------------------------------------
import { CommonActionFormProps } from './CommonActionFormProps';
import { useCorrelationRulesTemplateMessages } from '../../i18n';

export const SyslogActionForm: FC<CommonActionFormProps> = ({
  name,
  isDisabled,
  cardSize,
}) => {
  const locale = useCorrelationRulesTemplateMessages();
  const fieldStrings = locale.actionsRuleMessage.blockMessages.syslogMessage;
  const fieldRules: Array<Rule> = [
    { required: true, message: locale.formValidationMessages.emptyField },
  ];

  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' ? 12 : 24}>
          <Form.Item
            name={[name, 'host']}
            label={fieldStrings.host.title}
            rules={fieldRules}
          >
            <Input
              placeholder={fieldStrings.host.placeholder}
              disabled={isDisabled}
            />
          </Form.Item>
        </Col>

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

      <Row gutter={[32, 0]}>
        <Col span={cardSize === 'large' ? 12 : 24}>
          <Form.Item
            name={[name, 'protocol']}
            label={fieldStrings.protocol.title}
            rules={fieldRules}
          >
            <Select
              placeholder={fieldStrings.protocol.placeholder}
              options={[
                { value: 'tcp', label: 'TCP' },
                { value: 'udp', label: 'UDP' },
              ]}
              disabled={isDisabled}
            />
          </Form.Item>
        </Col>

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

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