// Antd
import { Form, Select } from 'antd';

// Types
import { DeviceType } from 'myApi';
import { RootStore } from 'stores/RootStore';
import { TypeSelectorAddNewEventSourceProps } from './types';
import { FC } from 'react';

// Hooks
import { useStore } from 'stores/StoreProvider';

// Antd Items
const { Option } = Select;

export const SelectorAddNewEventSource: FC<
  TypeSelectorAddNewEventSourceProps
> = ({ locale }) => {
  const rootStore: RootStore = useStore();
  const devicesUiStore = rootStore.devicesUiStore;
  const handleSelectNewSourceType = (value: DeviceType): void => {
    devicesUiStore.setTypeSelectedCard(value);
  };

  return (
    <Form.Item
      key="selectorFormItem"
      name="selectorFormItem"
      label={locale.type}
      rules={[
        {
          required: true,
          message: locale.validation,
        },
      ]}
    >
      <Select
        style={{ width: '100%' }}
        onChange={handleSelectNewSourceType}
        placeholder={locale.placeholder}
      >
        <Option value={DeviceType.Firewall}>ARMA Industrial Firewall</Option>
        <Option value={DeviceType.Endpoint}>ARMA Industrial Endpoint</Option>
        <Option value={DeviceType.Sensor}>ARMA Industrial Sensor</Option>
      </Select>
    </Form.Item>
  );
};
