import React from 'react';
import {Menu, Header} from 'semantic-ui-react';
import ListItem from './DeviceListItem';

const DeviceList = ({i18n, list, selected, toggleSelect}) => {

	return (
		<Menu vertical={true}>
			<Menu.Item>
				<Menu.Header content="裝置列表" />
				<Menu.Menu>
					{
						list.map((t, idx) => {
							return (
								<ListItem key={idx}
                                    i18n={i18n}
                                    data={t}
                                    toggleSelect={toggleSelect}
                                    checked={selected.indexOf(t.uid) == -1 ? false : true} />
							)
						})
					}
				</Menu.Menu>
			</Menu.Item>
		</Menu>
	)
}

export default DeviceList;