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

// App
// -----------------------------------------------------------------------------
import { InterfaceWithIdNameDescription } from 'types/default';
import { useCommonMessages } from 'components/i18n';
import { GenericGroupsDashboardUiStore } from '../GenericGroupsDashboardUiStore';

// Props
// -----------------------------------------------------------------------------
type GenericGroupCardProps = {
  form: FormInstance<InterfaceWithIdNameDescription>;
  uiStore: GenericGroupsDashboardUiStore;
  onFormSubmit: (values: InterfaceWithIdNameDescription) => void;
  onFormError: (
    errData: ValidateErrorEntity<InterfaceWithIdNameDescription>,
  ) => void;
};

const MAX_NAME_LENGTH = 128;

export const GenericGroupCard: FC<GenericGroupCardProps> = observer(
  ({ form, uiStore, onFormSubmit, onFormError }) => {
    const locale = useCommonMessages();
    const dashboardLocale = locale.genericGroupsDashboard;

    return (
      <Form
        form={form}
        layout="vertical"
        initialValues={uiStore.currentElement ?? {}}
        scrollToFirstError
        onFinish={onFormSubmit}
        onFinishFailed={onFormError}
      >
        <Form.Item hidden name="id">
          <Input type="hidden" />
        </Form.Item>

        <Row gutter={[32, 0]}>
          <Col span={uiStore.cardSize === 'large' ? 12 : 24}>
            <Form.Item
              name="name"
              label={dashboardLocale.name}
              rules={[
                {
                  required: true,
                  message: dashboardLocale.fieldIsRequired,
                },
                {
                  max: MAX_NAME_LENGTH,
                  message:
                    dashboardLocale.maxFieldLengthReached(MAX_NAME_LENGTH),
                },
              ]}
            >
              <Input
                disabled={uiStore.isFormDisabled}
                maxLength={MAX_NAME_LENGTH}
              />
            </Form.Item>
          </Col>

          <Col span={uiStore.cardSize === 'large' ? 12 : 24}>
            <Form.Item label={dashboardLocale.description} name="description">
              <Input.TextArea rows={5} disabled={uiStore.isFormDisabled} />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    );
  },
);
