<script setup>
import { computed } from "vue";
import Select from "primevue/select";
import { useCompanyStore } from "@/stores/company";

const companyStore = useCompanyStore();

const companyOptions = computed(() =>
	companyStore.companies.map((company) => ({ label: company, value: company })),
);

const selectedCompany = computed({
	get: () => companyStore.selectedCompany,
	set: (value) => companyStore.setSelectedCompany(value),
});

const fontSize = computed(() => {
	const len = selectedCompany.value.length;
	if (len > 12) return '0.71rem';
	if (len > 10) return '0.75rem';
	return '0.875rem';
});
</script>

<template>
	<div class="company-selector">
		<Select
			v-model="selectedCompany"
			:options="companyOptions"
			option-label="label"
			option-value="value"
			placeholder="Select Company"
			class="company-select"
		/>
	</div>
</template>

<style scoped>
.company-selector {
	margin-bottom: 6px;
}

.company-select {
	width: 100%;
}

:deep(.p-select) {
	border-radius: 6px;
	border: 1px solid var(--surface-border);
	background-color: var(--surface-card);
	color: var(--text-color);
	transition: all 0.2s ease;
}

:deep(.p-select:hover) {
	border-color: var(--theme-primary);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

:deep(.p-select.p-focus) {
	border-color: var(--theme-primary);
	box-shadow: 0 0 0 1px var(--theme-primary);
}

:deep(.p-select .p-select-label) {
	padding: 0.5rem 0.75rem;
	font-size: v-bind(fontSize);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

:deep(.p-select .p-select-trigger) {
	padding: 0 0.75rem;
}

:deep(.p-select-overlay) {
	border-radius: 6px;
	border: 1px solid var(--surface-border);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

:deep(.p-select-option) {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
}

:deep(.p-select-option:hover) {
	background-color: var(--surface-hover);
}
</style>
