<template>
	<ChannelWrapper
		:network="network"
		:channel="channel"
		:active-channel="activeChannel"
	>
		<button
			v-if="network.channels.length > 1"
			:aria-controls="'network-' + network.uuid"
			:aria-label="getExpandLabel(network)"
			:aria-expanded="!network.isCollapsed"
			class="collapse-network"
			@click.stop="onCollapseClick"
		><span class="collapse-network-icon" /></button>
		<span
			v-else
			class="collapse-network"
		/>
		<div class="lobby-wrap">
			<span
				:title="channel.name"
				class="name"
			>{{ channel.name }}</span>
			<span
				v-if="network.status.connected && !network.status.secure"
				class="not-secure-tooltip tooltipped tooltipped-w"
				aria-label="Insecure connection"
			>
				<span class="not-secure-icon" />
			</span>
			<span
				v-if="!network.status.connected"
				class="not-connected-tooltip tooltipped tooltipped-w"
				aria-label="Disconnected"
			>
				<span class="not-connected-icon" />
			</span>
			<span
				v-if="channel.unread"
				:class="{ highlight: channel.highlight }"
				class="badge"
			>{{ channel.unread | roundBadgeNumber }}</span>
		</div>
		<span
			:aria-label="joinChannelLabel"
			class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch"
		>
			<button
				:class="['add-channel', { opened: isJoinChannelShown }]"
				:aria-controls="'join-channel-' + channel.id"
				:aria-label="joinChannelLabel"
				@click.stop="$emit('toggleJoinChannel')"
			/>
		</span>
	</ChannelWrapper>
</template>

<script>
import ChannelWrapper from "./ChannelWrapper.vue";
const storage = require("../js/localStorage");

export default {
	name: "Channel",
	components: {
		ChannelWrapper,
	},
	props: {
		activeChannel: Object,
		network: Object,
		isJoinChannelShown: Boolean,
	},
	computed: {
		channel() {
			return this.network.channels[0];
		},
		joinChannelLabel() {
			return this.isJoinChannelShown ? "Cancel" : "Join a channel…";
		},
	},
	methods: {
		onCollapseClick() {
			const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
			this.network.isCollapsed = !this.network.isCollapsed;

			if (this.network.isCollapsed) {
				networks.add(this.network.uuid);
			} else {
				networks.delete(this.network.uuid);
			}

			storage.set("thelounge.networks.collapsed", JSON.stringify([...networks]));
		},
		getExpandLabel(network) {
			return network.isCollapsed ? "Expand" : "Collapse";
		},
	},
};
</script>