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

// App
// -----------------------------------------------------------------------------
import { CommonActionFormProps } from './CommonActionFormProps';
import {
  ForeignKeyEntitiesTable,
  SelectMultiple,
  SelectWithObjectValue,
} from 'components';
import { useStore } from 'stores/StoreProvider';
import { RootStore } from 'stores/RootStore';
import { useCorrelationRulesTemplateMessages } from '../../i18n';
import { makeListForSelect } from 'components/helpers';

export const IncidentActionForm: FC<CommonActionFormProps> = observer(
  ({ name, isDisabled, cardSize }) => {
    const rootStore: RootStore = useStore();
    const incidentsCategoriesStore = rootStore.incidentsCategoriesStore;
    const incidentsEffectsStore = rootStore.incidentsEffectsStore;
    const incidentsRecommendationsStore =
      rootStore.incidentsRecommendationsStore;
    const accountStore = rootStore.accountsStore;

    const locale = useCorrelationRulesTemplateMessages();
    const fieldStrings =
      locale.actionsRuleMessage.blockMessages.incidentMessage;
    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, 'title']}
              label={fieldStrings.title.title}
              rules={fieldRules}
            >
              <Input
                placeholder={fieldStrings.title.placeholder}
                disabled={isDisabled}
              />
            </Form.Item>
          </Col>

          <Col span={cardSize === 'large' ? 12 : 24}>
            <Form.Item
              name={[name, 'category']}
              label={fieldStrings.category.title}
            >
              <SelectWithObjectValue
                placeholder={fieldStrings.category.placeholder}
                disabled={isDisabled}
                options={incidentsCategoriesStore.list}
              />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={[32, 0]}>
          <Col span={cardSize === 'large' ? 12 : 24}>
            <Form.Item
              name={[name, 'importance']}
              label={fieldStrings.importance.title}
              rules={fieldRules}
            >
              <InputNumber
                placeholder={fieldStrings.importance.placeholder}
                disabled={isDisabled}
                style={{ width: '100%' }}
                stringMode
              />
            </Form.Item>
          </Col>

          <Col span={cardSize === 'large' ? 12 : 24}>
            <Form.Item
              name={[name, 'assigned_to']}
              label={fieldStrings.assignedTo.title}
            >
              <Select
                placeholder={fieldStrings.assignedTo.placeholder}
                disabled={isDisabled}
                options={[
                  { value: undefined, label: '----' },
                  ...accountStore.list.map((item: any) => {
                    const user = item?.listRecord?.user;
                    return {
                      value: user?.id.toString(),
                      label: user?.username,
                    };
                  }),
                ]}
              />
            </Form.Item>
          </Col>
        </Row>

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

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

        <Row gutter={[32, 0]}>
          <Col span={cardSize === 'large' ? 12 : 24}>
            <Form.Item label={fieldStrings.recommendations.title}>
              <Row gutter={[16, 0]} wrap={false}>
                <Col flex="auto">
                  <Form.Item name={[name, 'close_recommendations']} noStyle>
                    <SelectMultiple
                      options={makeListForSelect(
                        incidentsRecommendationsStore.list,
                      )}
                      disabled={isDisabled}
                      // style={{ width: 'calc(100% - 31px)' }}
                      style={{ width: '100%' }}
                      placeholder={fieldStrings.recommendations.placeholder}
                    />
                  </Form.Item>
                </Col>

                <Col flex="none">
                  <ForeignKeyEntitiesTable
                    title={fieldStrings.recommendations.title}
                    dataStore={incidentsRecommendationsStore}
                    isDisabled={isDisabled}
                  />
                </Col>
              </Row>
            </Form.Item>
          </Col>

          <Col span={cardSize === 'large' ? 12 : 24}>
            <Form.Item label={fieldStrings.effects.title}>
              <Row gutter={[16, 0]} wrap={false}>
                <Col flex="auto">
                  <Form.Item name={[name, 'effects']} noStyle>
                    <SelectMultiple
                      options={makeListForSelect(incidentsEffectsStore.list)}
                      disabled={isDisabled}
                      style={{ width: '100%' }}
                      placeholder={fieldStrings.effects.placeholder}
                    />
                  </Form.Item>
                </Col>
                <Col flex="none">
                  <ForeignKeyEntitiesTable
                    title={fieldStrings.effects.title}
                    dataStore={incidentsEffectsStore}
                    isDisabled={isDisabled}
                  />
                </Col>
              </Row>
            </Form.Item>
          </Col>
        </Row>
      </Fragment>
    );
  },
);
