import { Form, FormProps, Input, Select } from 'antd';
import React from 'react';

import { ManufacturerAsset } from '../types';
import { validationIp } from './validation';
import { assetsTypeValue } from '../MOCK';
import { TypeTags } from 'types/default';
import { TAssetsMessages, useAssetsMessages } from '../i18n';
import { validateMultiplePortsAsJsonString } from '../../../components/formValidators';

export type AuthSyncProps = FormProps & {
  onFinish: any;
  onValuesChange?: any;
  osList: any;
  postOsList: any;
  manufacturersList: ManufacturerAsset[];
  disabled: boolean;
  tagsList: TypeTags[];
  onFinishFailed: any;
};
const { Option } = Select;

export const AssetCardInfoForm = (props: AuthSyncProps): JSX.Element => {
  const {
    form,
    onFinish,
    onValuesChange,
    osList,
    manufacturersList,
    disabled,
    tagsList,
    onFinishFailed,
  } = props;
  const { cardInfoFields }: TAssetsMessages = useAssetsMessages();

  const {
    name,
    assetType,
    ip,
    ipValidation,
    os,
    manufacturer,
    model,
    status,
    tags,
    description,
    ports,
    portsValidation,
    selectManufacturerFromList,
    manufacturerList,
    portsListExtra,
    assetModelExtra,
    fieldCanNotEmptyValidation,
    ipExtra,
    selectOsFromList,
    osFoundOnAssetExtra,
    selectGroupsFromListPlaceholder,
    groupsWhichTheAssetBelongs,
    selectAssetStatus,
    assetResolutionStatus,
    enterLoginAsset,
    maxLength,
    permitted,
    notPermitted,
  } = cardInfoFields;
  return (
    <Form
      layout="vertical"
      key="accountForm"
      name="accountForm"
      form={form}
      onFinish={onFinish}
      onFieldsChange={onValuesChange}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label={name}
        key="name"
        name="name"
        rules={[
          {
            required: true,
            message: fieldCanNotEmptyValidation,
          },
        ]}
        extra={maxLength}
      >
        <Input
          disabled={disabled}
          maxLength={128}
          placeholder={enterLoginAsset}
        />
      </Form.Item>
      <Form.Item label={assetType} key="asset_type" name="asset_type">
        <Select disabled={disabled} placeholder="Выберите тип из списка">
          {assetsTypeValue.map((item: any) => (
            <Option key={item.value} value={item.value}>
              {item.title}
            </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item
        label={status}
        key="status"
        name="status"
        extra={assetResolutionStatus}
      >
        <Select disabled={disabled} placeholder={selectAssetStatus}>
          <Option value={0} key={1}>
            {notPermitted}
          </Option>
          <Option value={1} key={2}>
            {permitted}
          </Option>
        </Select>
      </Form.Item>
      <Form.Item
        key="group"
        label={tags}
        name="group"
        extra={groupsWhichTheAssetBelongs}
      >
        <Select
          disabled={disabled}
          placeholder={selectGroupsFromListPlaceholder}
        >
          {tagsList.map((item: any) => (
            <Option key={item.id} value={item.id}>
              {item.name}
            </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item label={os} key="os" name="os" extra={osFoundOnAssetExtra}>
        <Select disabled={disabled} placeholder={selectOsFromList}>
          {osList.map((item: any) => (
            <Option key={item.id} value={item.id}>
              {item.name}
            </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item
        label={ip}
        key="ip"
        name="ip"
        extra={ipExtra}
        rules={[
          {
            required: true,
            message: fieldCanNotEmptyValidation,
          },
          () => ({
            async validator(_, value) {
              await validationIp(_, value, ipValidation);
            },
          }),
        ]}
      >
        <Input disabled={disabled} />
      </Form.Item>
      <Form.Item key="description" label={description} name="description">
        <Input disabled={disabled} />
      </Form.Item>
      <Form.Item
        key={'model'}
        label={model}
        name={'model'}
        extra={assetModelExtra}
      >
        <Input disabled={disabled} />
      </Form.Item>
      <Form.Item
        key={'ports'}
        label={ports}
        name={'ports'}
        rules={[
          {
            message: portsValidation,
            validator: validateMultiplePortsAsJsonString,
          },
        ]}
        extra={portsListExtra}
      >
        <Input disabled={disabled} />
      </Form.Item>
      <Form.Item
        key={'manufacturer'}
        label={manufacturer}
        name={'manufacturer'}
        extra={manufacturerList}
      >
        <Select
          disabled={disabled}
          placeholder={selectManufacturerFromList}
          options={manufacturersList.map((item) => ({
            value: item.id,
            label: item.name,
          }))}
          allowClear
        />
      </Form.Item>
    </Form>
  );
};
