// Libs
// -----------------------------------------------------------------------------
import React, { FC } from 'react';
import { Form, FormInstance, Input, Checkbox, Row, Col } from 'antd';
import type { ValidateErrorEntity } from 'rc-field-form/lib/interface';
import { Rule } from 'antd/lib/form';
import { observer } from 'mobx-react-lite';

// App
// -----------------------------------------------------------------------------
import styles from './CorrelationRulesCard.module.scss';
import { CorrelationRulesRecord } from 'types/default';
import {
  FormFieldsBlock,
  StringTimePicker,
  ForeignKeyEntitiesTable,
  SelectWithObjectValue,
} from 'components';
import { CorrelationRulesChecker } from '../CorrelationRulesChecker/CorrelationRulesChecker';
import { CorrelationRulesActionsEditor } from '../CorrelationRulesActionsEditor/CorrelationRulesActionsEditor';
import { useStore } from 'stores/StoreProvider';
import { RootStore } from 'stores/RootStore';
import { useCorrelationRulesTemplateMessages } from '../i18n';

// Props
// -----------------------------------------------------------------------------
type CorrelationRulesCardProps = {
  form: FormInstance<CorrelationRulesRecord>;
  onFormSubmit: (values: CorrelationRulesRecord) => void;
  onFormError: (errData: ValidateErrorEntity<CorrelationRulesRecord>) => void;
};

export const CorrelationRulesCard: FC<CorrelationRulesCardProps> = observer(
  ({ form, onFormSubmit, onFormError }) => {
    const locale = useCorrelationRulesTemplateMessages();
    const fieldStrings = locale.basicRuleSettingsMessage;
    const fieldRules: Array<Rule> = [
      { required: true, message: locale.formValidationMessages.emptyField },
    ];

    const rootStore: RootStore = useStore();
    const pageStore = rootStore.correlationRulesUiStore;
    const groupsStore = rootStore.correlationRulesGroupsStore;

    return (
      <Form
        form={form}
        layout="vertical"
        initialValues={pageStore.currentElement ?? {}}
        scrollToFirstError
        onFinish={onFormSubmit}
        onFinishFailed={onFormError}
      >
        <div className={styles['content']}>
          <FormFieldsBlock title={locale.basicRuleSettingsMessage.title}>
            <Form.Item hidden name="id">
              <Input type="hidden" />
            </Form.Item>

            <Form.Item hidden name="type">
              <Input type="hidden" />
            </Form.Item>

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

                <Form.Item label={fieldStrings.ruleGroup.title}>
                  <Input.Group compact>
                    <Form.Item name="group" noStyle>
                      <SelectWithObjectValue
                        options={groupsStore.list}
                        disabled={pageStore.isFormDisabled}
                        style={{ width: 'calc(100% - 31px)' }}
                      />
                    </Form.Item>
                    <ForeignKeyEntitiesTable
                      title={fieldStrings.ruleGroup.title}
                      dataStore={groupsStore}
                      isDisabled={pageStore.isFormDisabled}
                    />
                  </Input.Group>
                </Form.Item>

                <Form.Item
                  name="depth"
                  label={fieldStrings.depthAnalysis.title}
                  rules={fieldRules}
                  extra={fieldStrings.depthAnalysis.placeholder}
                >
                  <StringTimePicker disabled={pageStore.isFormDisabled} />
                </Form.Item>

                <Form.Item
                  name="sid"
                  label={fieldStrings.sid.title}
                  rules={fieldRules}
                  extra={fieldStrings.sid.placeholder}
                >
                  <Input disabled={pageStore.isFormDisabled} />
                </Form.Item>
              </Col>

              <Col span={pageStore.cardSize === 'large' ? 12 : 24}>
                <Form.Item
                  label={fieldStrings.description.title}
                  name="description"
                >
                  <Input.TextArea
                    rows={5}
                    disabled={pageStore.isFormDisabled}
                    placeholder={fieldStrings.description.placeholder}
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={[32, 0]}>
              <Col span={pageStore.cardSize === 'large' ? 12 : 24}>
                <Form.Item
                  name="status"
                  extra={fieldStrings.status.placeholder}
                  valuePropName="checked"
                >
                  <Checkbox disabled={pageStore.isFormDisabled}>
                    {fieldStrings.status.title}
                  </Checkbox>
                </Form.Item>
              </Col>

              <Col span={pageStore.cardSize === 'large' ? 12 : 24}>
                <Form.Item
                  name="multi"
                  extra={fieldStrings.multi.placeholder}
                  valuePropName="checked"
                >
                  <Checkbox disabled={pageStore.isFormDisabled}>
                    {fieldStrings.multi.title}
                  </Checkbox>
                </Form.Item>
              </Col>
            </Row>
          </FormFieldsBlock>

          <CorrelationRulesChecker form={form} />

          <CorrelationRulesActionsEditor form={form} />
        </div>
      </Form>
    );
  },
);
