<template>
	<div class="subcategory-panel">
		<div class="subcategory-header">
			<div class="clickable" @click="onBackArrowClick">
				<font-awesome-icon class="back-arrow" icon="arrow-left" />
			</div>
			<span>
				{{ $baseText(`nodeCreator.subcategoryNames.${subcategoryName}`) }}
			</span>
		</div>

		<div class="scrollable">
			<ItemIterator
				:elements="elements"
				:activeIndex="activeIndex"
				@selected="selected"
			/>
		</div>
	</div>
</template>

<script lang="ts">
import camelcase from 'lodash.camelcase';
import { INodeCreateElement } from '@/Interface';
import Vue from 'vue';

import ItemIterator from './ItemIterator.vue';

import { renderText } from '@/components/mixins/renderText';
import mixins from 'vue-typed-mixins';

export default mixins(renderText).extend({
	name: 'SubcategoryPanel',
	components: {
		ItemIterator,
	},
	props: ['title', 'elements', 'activeIndex'],
	computed: {
		subcategoryName() {
			return camelcase(this.title);
		},
	},
	methods: {
		selected(element: INodeCreateElement) {
			this.$emit('selected', element);
		},
		onBackArrowClick() {
			this.$emit('close');
		},
	},
});
</script>

<style lang="scss" scoped>
.subcategory-panel {
	position: absolute;
	background: $--node-creator-search-background-color;
	z-index: 100;
	height: 100%;
	width: 100%;

	&:before {
		box-sizing: border-box;
		content: ' ';
		border-left: 1px solid $--node-creator-border-color;
		width: 1px;
		position: absolute;
		height: 100%;
	}
}

.subcategory-header {
	border: $--node-creator-border-color solid 1px;
	height: 50px;
	background-color: $--node-creator-subcategory-panel-header-bacground-color;

	font-size: 18px;
	font-weight: 600;
	line-height: 16px;

	display: flex;
	align-items: center;
	padding: 11px 15px;
}

.back-arrow {
	color: $--node-creator-arrow-color;
	height: 16px;
	width: 16px;
	margin-right: 24px;
}

.scrollable {
	overflow-y: auto;
	overflow-x: visible;
	height: calc(100% - 100px);

	&::-webkit-scrollbar {
		display: none;
	}

	> div {
		padding-bottom: 30px;
	}
}

</style>