import { useAtomValue } from 'jotai';
import { FC } from 'react';
import { ScrollArea } from '../../components/ScrollArea';
import { AvailablePeripherals } from '../../context/EstimContext';
import IconRssi from '../../icons/IconRssi';
import styles from './DeviceList.module.css';

const AvailableDevices: FC = () => {
  const devices = useAtomValue(AvailablePeripherals);

  return (
    <div className={styles.devices_list}>
      {devices.length === 0 && <div className={styles.empty_prompt}>No available devices.</div>}
      {devices.map((device, index) => (
        <div key={index} className={styles.device_card}>
          <div className={styles.device_name}>{device.represent}</div>
          <IconRssi height={14} level={device.rssi} />
        </div>
      ))}
    </div>
  );
};

const DeviceList: FC = () => {
  return (
    <div className={styles.devices}>
      <ScrollArea enableY>
        <div className={styles.devices_list_layout}>
          <AvailableDevices />
        </div>
      </ScrollArea>
    </div>
  );
};

export default DeviceList;