'use strict';
const React = require('react');
const create = require('create-react-class');
const jdenticon = require('jdenticon');

const FilterList = require('./filterList.js');

let RoomListItem = create({
	displayName: "RoomListItem",

	getInitialState: function() {
		let room = this.props.content;
		let client = this.props.properties.client;
		let jdenticon = <svg id="avatar" ref={this.jdenticonRef}/>;
		let avatarUrl;

		let roomState = room.getLiveTimeline().getState('f');
		let avatarState = roomState.getStateEvents('m.room.avatar');
		if (avatarState.length > 0) {
			let event = avatarState[avatarState.length-1].event;
			let hs = client.baseUrl;
			let media_mxc = event.content.url.slice(6);
			let path = `/_matrix/media/v1/thumbnail/${media_mxc}?width=128&height=128&method=scale`;
			avatarUrl = {
				hs: hs,
				path: path
			};
		}

		return {
			filterName: room.name.toUpperCase(),
			unread: Math.random() > 0.7,
			avatarUrl: avatarUrl,
			jdenticon: jdenticon,
			tries: 0
		};
	},

	jdenticonRef: function(ref) {
		jdenticon.update(ref, this.props.content.roomId);
	},

	avatarFallback: function() {
		// instead of falling back on jdenticon immediately, we can try
		// a third-party homeserver's media repo
		// this does come with trust issues, and is opt-in in settings
		let fallbackMediaRepos = this.props.properties.options.fallbackMediaRepos;

		if (this.state.tries < fallbackMediaRepos.length) {
			let avatarUrl = this.state.avatarUrl;
			avatarUrl.hs = fallbackMediaRepos[this.state.tries];
			this.setState({
				avatarUrl: avatarUrl,
				tries: this.state.tries + 1
			});
		} else {
			this.setState({avatarUrl: null, avatar: jdenticon});
		}
	},

	setRef: function(ref) {
		if (ref == null) {
			return;
		}
		this.setState({ref: ref});
		ref.addEventListener("click", () => {this.props.select(this.props.listId);});
	},

	render: function() {
		if (this.state.filterName.indexOf(this.props.filter) == -1) {
			return null;
		}
		let className = "roomListItem";
		if (this.props.selected) {
			className += " active";
		}
		if (this.state.unread) {
			className += " unread";
		}
		return <div className={className} ref={this.setRef}>
			{this.state.avatarUrl ?
				<img id="avatar" src={`${this.state.avatarUrl.hs}${this.state.avatarUrl.path}`} onError={this.avatarFallback}></img>
				:
				this.state.jdenticon
			}
			<span id="name">{this.props.content.name}</span>
		</div>;
	}
});

let Sidebar = create({
	displayName: "Sidebar",

	getInitialState: function() {
		return {
			filter: ""
		};
	},

	setFilter: function(filter) {
		this.setState({
			filter: filter.toUpperCase()
		});
	},

	render: function() {
		return <div className="sidebar">
			<FilterList items={this.props.rooms} properties={{client: this.props.client, options: this.props.options}} element={RoomListItem} callback={(roomId) => {this.props.selectRoom(roomId);}}/>
		</div>;
	}
});


module.exports = Sidebar;