import { Col, Form, FormProps, Row } from 'antd';

//Types
import { TypeCardInfoFirewallMessages } from 'pages/DevicesDashboard/types';
import { RootStore } from 'stores/RootStore';

// Apps
import { useFirewallFormConfiguration } from './useFirewallFormConfiguration';
import { useStore } from 'stores/StoreProvider';
import { FC } from 'react';
import { TypeCommonValidationMessages } from 'components/i18n';

export type TypeFireWallFormProps = FormProps & {
  locale: TypeCardInfoFirewallMessages;
  localeValidation: TypeCommonValidationMessages;
};
export const FireWallForm: FC<TypeFireWallFormProps> = (props) => {
  const { locale, localeValidation } = props;

  const rootStore: RootStore = useStore();
  const devicesUiStore = rootStore.devicesUiStore;

  const firewallForm = useFirewallFormConfiguration({
    locale,
    localeValidation,
  });

  return devicesUiStore.cardSize === 'large' ? (
    <Row gutter={[8, 12]}>
      {firewallForm.map((item) => (
        <Col className="gutter-row" span={8} key={'column_' + item.key}>
          <Form.Item
            label={item.label}
            key={item.key}
            name={item.name}
            extra={item.extra}
            rules={item.rules}
          >
            {item.element}
          </Form.Item>
        </Col>
      ))}
    </Row>
  ) : (
    <>
      {firewallForm.map((item) => (
        <Form.Item
          label={item.label}
          key={item.key}
          name={item.name}
          extra={item.extra}
          rules={item.rules}
        >
          {item.element}
        </Form.Item>
      ))}
    </>
  );
};
