// Antd
import { Input, InputNumber, Select } from 'antd';

// Types
import { Rule } from 'antd/lib/form';
import { TypeCardInfoFirewallMessages } from 'pages/DevicesDashboard/types';
import { TypeFirewallConfiguration } from '../types';
import { RootStore } from 'stores/RootStore';
import { useStore } from 'stores/StoreProvider';

// Apps
import { validationIp } from 'pages/AssetsDashboard/AssetsCardInfo/validation';
import { TypeCommonValidationMessages } from 'components/i18n';

type TypeFirewallFormConfiguration = {
  locale: TypeCardInfoFirewallMessages;
  localeValidation: TypeCommonValidationMessages;
};

export const useFirewallFormConfiguration = ({
  locale,
  localeValidation,
}: TypeFirewallFormConfiguration): TypeFirewallConfiguration[] => {
  // Stores
  const rootStore: RootStore = useStore();
  const devicesUiStore = rootStore.devicesUiStore;

  const firewallTranslation = locale.main;

  return [
    // Имя
    {
      key: 'name',
      label: firewallTranslation.name,
      name: 'name',
      rules: [
        {
          required: true,
          message: localeValidation.fieldNotBeEmpty,
        },
        {
          max: 128,
          message: localeValidation.nameMaxLength,
        },
      ],
      extra: firewallTranslation.nameExtra,
      element: (
        <Input
          disabled={devicesUiStore.isDisabledForm}
          placeholder={firewallTranslation.namePlaceholder}
        />
      ),
    },

    // IP
    {
      key: 'ip',
      label: firewallTranslation.ip,
      name: 'ip',
      rules: [
        {
          required: true,
          message: localeValidation.fieldNotBeEmpty,
        },
        () => ({
          async validator(_: Rule, value: string) {
            await validationIp(_, value, localeValidation.ipValidation);
          },
        }),
      ],
      extra: firewallTranslation.ipExtra,
      element: (
        <Input
          disabled={devicesUiStore.isDisabledForm}
          placeholder={firewallTranslation.ipPlaceholder}
        />
      ),
    },

    // Ключ
    {
      key: 'key',
      label: firewallTranslation.key,
      name: 'key',
      rules: [
        {
          required: true,
          message: localeValidation.fieldNotBeEmpty,
        },
      ],
      extra: firewallTranslation.keyExtra,
      element: (
        <Input
          disabled={devicesUiStore.isDisabledForm}
          placeholder={firewallTranslation.keyPlaceholder}
        />
      ),
    },

    // Секрет
    {
      key: 'secret',
      label: firewallTranslation.secret,
      name: 'secret',
      rules: [
        {
          required: true,
          message: localeValidation.fieldNotBeEmpty,
        },
      ],
      extra: firewallTranslation.secretExtra,
      element: (
        <Input
          disabled={devicesUiStore.isDisabledForm}
          placeholder={firewallTranslation.secretPlaceholder}
        />
      ),
    },

    // Порт
    {
      key: 'port',
      label: firewallTranslation.port,
      name: 'port',
      rules: [
        {
          required: true,
          message: localeValidation.fieldNotBeEmpty,
        },
      ],
      extra: firewallTranslation.portExtra,
      element: (
        <InputNumber
          style={{ width: '100%' }}
          min={1500}
          max={65535}
          disabled={devicesUiStore.isDisabledForm}
          placeholder={firewallTranslation.portPlaceholder}
        />
      ),
    },

    // Группа
    {
      key: 'group',
      label: firewallTranslation.group,
      name: 'group',
      extra: firewallTranslation.groupExtra,
      element: (
        <Select
          allowClear
          disabled={devicesUiStore.isDisabledForm}
          options={devicesUiStore.groupList.map((item) => {
            return {
              value: item.id,
              label: item.name,
            };
          })}
        />
      ),
    },

    // Описание
    {
      key: 'description',
      label: firewallTranslation.info,
      name: 'description',
      element: <Input disabled={devicesUiStore.isDisabledForm} />,
    },
  ];
};
