import { observer } from 'mobx-react-lite';
import { useStore } from '../../stores/StoreProvider';
import { Button, Modal, Table } from 'antd';
import { columnSensorInformationModal } from '../../mock/dataAssets';

import './Devices.scss';

export const SensorInformationModal = observer(() => {
  const { DevicesUiStore: DevicesStore } = useStore();

  const handleCancel = (): void => {
    DevicesStore.setVisibleSensorInformationModal(false);
  };

  return (
    <Modal
      title="Sensor information"
      visible={DevicesStore.getVisibleSensorInformationModal}
      onCancel={handleCancel}
      width={600}
      footer={[
        <Button key="back" onClick={handleCancel}>
          Close
        </Button>,
      ]}
    >
      <Table
        size="middle"
        columns={columnSensorInformationModal}
        dataSource={DevicesStore.getSensorInformation}
        pagination={false}
      />
    </Modal>
  );
});
