<template>
	<div class="operate input-toolbar flex align-center space-between" :class="{ agent: isAgentMode }">
		<div class="left flex align-center">
			<AgentOperatePopover
				v-if="isAgentMode"
				@upload="triggerFileUpload"
				@toggle-report="emit('toggle-report')"
			/>
			<div
				v-if="!isAgentMode"
				class="attach flex flex-center"
				@click="triggerFileUpload"
			>
				<img src="@/assets/icons/attach.svg" />
			</div>
			<input
				ref="fileInputRef"
				type="file"
				accept="image/*"
				style="display: none"
				@change="emit('file-change', $event)"
			/>
			<el-select
				v-if="!isAgentMode"
				v-model="typeModel"
				:placeholder="typePlaceholder"
				:disabled="parametersDisabled"
			>
				<el-option
					v-for="item in typeOptions"
					class="input-option"
					:key="item.value"
					:label="translate(item.label)"
					:value="item.value"
				/>
			</el-select>
			<el-select
				v-if="!isAgentMode"
				v-model="areaModel"
				:placeholder="areaPlaceholder"
				:disabled="parametersDisabled"
			>
				<el-option
					v-for="item in areaOptions"
					class="input-option"
					:key="item.value"
					:label="translate(item.label)"
					:value="item.value"
				/>
			</el-select>
			<StyleSelect
				v-if="!isAgentMode"
				v-model="styleModel"
				:type-value="typeValue"
				:options="styleOptions"
				:placeholder="stylePlaceholder"
				:title="styleTitle"
				:confirm-text="confirmText"
				:disabled="parametersDisabled"
			/>
			<!-- <SettingPopover
				v-model:options="settingOptionsModel"
				:title="settingTitle"
				:translate="translate"
			/> -->
		</div>
		<div class="right">
			<div
				v-if="!isAgentMode"
				class="create-btn flex flex-center"
				@click="emit('create')"
			>
				<img src="@/assets/images/shining.png" class="shining-icon" alt="" />
				<span class="create-btn-text">{{ createText }}</span>
			</div>

			<div v-else class="sender-btn flex flex-center" @click="emit('send')">
				<img
					v-show="!generating"
					src="@/assets/images/sender.png"
					alt=""
					class="sender-icon"
				/>
				<div v-show="generating" class="sender-pause" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import AgentOperatePopover from './AgentOperatePopover.vue'
	import SettingPopover from './SettingPopover.vue'
	import StyleSelect from './StyleSelect.vue'
	import type { OptionItem, SettingOption } from './types'

	const props = withDefaults(
		defineProps<{
			isAgentMode?: boolean
			generating?: boolean
			typeValue: string
			areaValue: string
			styleValue: string
			typeOptions: OptionItem[]
			areaOptions: OptionItem[]
			styleOptions: OptionItem[]
			settingOptions: SettingOption[]
			typePlaceholder: string
			areaPlaceholder: string
			stylePlaceholder: string
			styleTitle: string
			settingTitle: string
			confirmText: string
			createText: string
			parametersDisabled?: boolean
			translate: (key: string) => string
		}>(),
		{
			isAgentMode: false,
			generating: false,
			parametersDisabled: false
		}
	)

	const emit = defineEmits<{
		(e: 'update:typeValue', value: string): void
		(e: 'update:areaValue', value: string): void
		(e: 'update:styleValue', value: string): void
		(e: 'update:settingOptions', value: SettingOption[]): void
		(e: 'file-change', event: Event): void
		(e: 'toggle-report'): void
		(e: 'create'): void
		(e: 'send'): void
	}>()

	const fileInputRef = ref<HTMLInputElement | null>(null)

	const typeModel = computed({
		get: () => props.typeValue,
		set: (value: string) => emit('update:typeValue', value)
	})

	const areaModel = computed({
		get: () => props.areaValue,
		set: (value: string) => emit('update:areaValue', value)
	})

	const styleModel = computed({
		get: () => props.styleValue,
		set: (value: string) => emit('update:styleValue', value)
	})

	const settingOptionsModel = computed({
		get: () => props.settingOptions,
		set: (value: SettingOption[]) => emit('update:settingOptions', value)
	})

	const triggerFileUpload = () => {
		fileInputRef.value?.click()
	}
</script>

<style lang="less" scoped>
	.input-toolbar {
		flex-shrink: 0;
		margin-top: auto;
		padding: 0 1.7rem 1.7rem;

		.left {
			column-gap: 2rem;
		}

		.attach {
			width: 4rem;
			height: 4rem;
			border: 1px solid rgba(0, 0, 0, 0.1);
			border-radius: 50%;
			cursor: pointer;

			img {
				width: 1.65rem;
				height: 1.86rem;
			}
		}

		.el-select {
			width: 13.9rem;
			height: 4rem;

			:deep(.el-select__wrapper) {
				border-radius: 0.8rem;
				height: 100%;
				box-shadow: none;
				border: 0.1rem solid rgba(0, 0, 0, 0.1);
				font-weight: 500;
				font-size: 1.4rem;
				min-height: initial;

				.el-select__placeholder {
					color: #000;
				}

				.el-select__icon {
					color: #000;
				}

				&.is-disabled {
					.el-select__placeholder,
					.el-select__selected-item {
						color: #c9c9c9;
					}
				}
			}
		}

		.create-btn {
			background-color: #ff7a51;
			height: 4rem;
			width: 13rem;
			color: #fff;
			border-radius: 4.2rem;
			font-family: 'SemiBold';
			font-weight: 600;
			font-size: 1.3rem;
			cursor: pointer;
			column-gap: 0.3rem;

			.shining-icon {
				width: 1.4rem;
				height: 1.4rem;
			}
		}

		&.agent {
			padding: 1.2rem 0 0;
			margin: 0;

			.right {
				display: flex;
				align-items: center;

				.sender-btn {
					width: 3.2rem;
					height: 3.2rem;
					cursor: pointer;
					background-color: #ff7a51;
					border-radius: 50%;

					&:hover {
						background-color: #f8693d;
					}

					.sender-icon {
						width: 1.3rem;
						height: 1.3rem;
					}

					.sender-pause {
						width: 1rem;
						height: 1rem;
						background-color: #fff;
					}
				}
			}
		}
	}
</style>

<style lang="less">
	.input-option {
		padding-left: 2rem !important;
		color: #0d0d0d;
		font-weight: 510;
		font-size: 1.3rem;
		height: 3rem;
		line-height: 3rem;

		&.el-select-dropdown__item.is-hovering {
			background-color: rgba(13, 13, 13, 0.05);
		}
	}
</style>
