import React, {useState} from 'react'; import {lightBorder, primary45} from '../utils/colors'; import {useDispatch, useSelector} from 'react-redux'; import {SmallInstanceItem} from './SmallInstanceItem'; import {setInstanceIndex} from '../actions/main'; import {FiHardDrive, FiLock, FiUnlock} from 'react-icons/fi'; export function InstanceSelector({}) { const main = useSelector((state) => state.main); const dispatch = useDispatch(); const {instances, instanceIndex} = main; const currentInstance = instances[instanceIndex]; const [menuEnabled, setMenuEnabled] = useState(false); const filteredInstances = instances.filter( (instance) => instance !== currentInstance, ); const styles = { container: { display: instances.length > 1 ? 'flex' : 'none', alignItems: 'center', position: 'relative', marginRight: 6, border: `1px solid ${lightBorder}`, borderBottomWidth: menuEnabled ? 0 : 1, color: primary45, padding: '3px 6px', borderRadius: `4px 4px ${menuEnabled ? 0 : 4}px ${menuEnabled ? 0 : 4}px`, fontSize: 14, fontWeight: 400, }, menu: { backgroundColor: '#FFF', position: 'absolute', minWidth: 196, top: 25, left: -1, border: `1px solid ${lightBorder}`, color: primary45, zIndex: 2, }, icon: { marginRight: 4, }, }; const LockComponent = currentInstance?.isEncrypted ? FiLock : FiUnlock; return ( <span style={styles.container} onClick={() => { if (filteredInstances.length) { setMenuEnabled(!menuEnabled); } }}> <FiHardDrive color={primary45} size={16} style={styles.icon} /> <LockComponent color={primary45} size={14} style={styles.icon} /> <span id={'currentInstanceSelector'}>{currentInstance?.label || currentInstance?.name}</span> {menuEnabled ? ( <div style={styles.menu}> {filteredInstances.map((instance, index) => ( <SmallInstanceItem key={index} data={instance} onClick={() => { const instanceIndexToUse = instances.findIndex( (inst) => inst === instance, ); dispatch(setInstanceIndex(instanceIndexToUse)); }} /> ))} </div> ) : null} </span> ); }