<template>
	<div class="wcc-dropdown" :class="{ open: visible }" v-click-outside="hide">
		<button
			class="wcc-button-icon wcc-dropdown-anchor"
			v-html="text"
			@click="toggle()"
			:disabled="disabled"
		></button>
		<div class="wcc-dropdown-content" v-on:click="hide()">
			<slot></slot>
		</div>
	</div>
</template>

<script>

export default {
	name: "Dropdown",
	props: {
		text: {
			type: String,
			default: "",
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		sticky: {
			type: Boolean,
			default: false,
		},
		active: {
			type:Boolean,
			default: false,
		}
	},
	data() {
		return {
			visible: false,
		};
	},
	methods: {
		toggle() {
			this.visible = !this.visible;
			this.$emit("wccToggleDropDown");
		},
		hide() {
			if (this.sticky) return;
			this.visible = false;
		},
	},
	mounted() {
		this.visible = this.active;
	}
};
</script>
<style lang="scss">
.wcc-dropdown {
	position: relative;

	.wcc-dropdown-content {
		width: 100%;
		display: none;
		position: absolute;
		z-index: 10;
		top: 100%;
		left: auto;
		margin: 0px 0 0;
		padding: 10px 10px;
		border: 1px solid #dddddd;
		border-radius: 3px;
		background-color: #ffffff;
		-webkit-box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.07);
		box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.07);
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;

		ul {
			max-height: 180px;
			padding: 0;
			margin: 0;
			li {
				list-style: none;
				margin: 0;
				padding: 5px 0;
				.wcc-form-group {
					margin: 0;
				}
				&:hover {
					background: #f8f9fa;
				}
				a {
					display: block;
				}
			}
		}
	}
	.wcc-dropdown-anchor {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E);
		background-size: 10px;
		background-position: calc(100% - 10px) center;
		background-repeat: no-repeat;
		padding: 8px 30px 8px 70px;
		min-height: 40px;
		height: max-content;
		outline: none;
		box-shadow: none;
		width: 100%;
		margin: 0;
		border: 1px solid #ddd;
		border-radius: 3px;
		font-size: 14px;
		font-weight: 400;
		transition: 0.3s ease-in-out;
		line-height: 16px;
		background-color: #fff;
		text-align: left;
		cursor: pointer;
	}
	&.open {
		.wcc-dropdown-content {
			display: block;
		}
	}
}
</style>