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

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

export const HttpActionForm: FC<CommonActionFormProps> = ({
  name,
  isDisabled,
  cardSize,
}) => {
  const locale = useCorrelationRulesTemplateMessages();
  const fieldStrings = locale.actionsRuleMessage.blockMessages.httpMessage;
  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, 'url']}
            label={fieldStrings.url.title}
            rules={fieldRules}
          >
            <Input
              placeholder={fieldStrings.url.placeholder}
              disabled={isDisabled}
            />
          </Form.Item>
        </Col>

        <Col span={cardSize === 'large' ? 12 : 24}>
          <Form.Item
            name={[name, 'content_type']}
            label={fieldStrings.contentType.title}
            rules={fieldRules}
          >
            <Select
              placeholder={fieldStrings.contentType.placeholder}
              options={[{ value: 'text/plain' }, { value: 'application/json' }]}
              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>
  );
};
