<template>
	<div
		class="my-5"
		:class="{ 'flex justify-between w-full': columns.length > 1 }"
	>
		<div v-for="(column, index) in columns" :key="index">
			<div
				class="flex flex-col space-y-5"
				:class="columns.length > 1 ? 'w-72' : 'w-full'"
			>
				<div v-for="field in column">
					<Link
						v-if="field.type == 'Link'"
						v-model="data[field.name]"
						:doctype="field.doctype"
						:label="__(field.label)"
					/>

					<div v-else-if="field.type == 'Code'">
						<div>
							{{ __(field.label) }}
						</div>
						<Codemirror
							v-model:value="data[field.name]"
							:height="200"
							:options="{
								mode: field.mode,
								theme: 'seti',
							}"
						/>
					</div>

					<div v-else-if="field.type == 'Upload'">
						<div class="text-sm text-gray-600 mb-1">
							{{ __(field.label) }}
						</div>
						<FileUploader
							v-if="!data[field.name]"
							:fileTypes="['image/*']"
							:validateFile="validateFile"
							@success="(file) => (data[field.name] = file)"
						>
							<template
								v-slot="{ file, progress, uploading, openFileSelector }"
							>
								<div class="">
									<Button @click="openFileSelector" :loading="uploading">
										{{
											uploading ? `Uploading ${progress}%` : 'Upload an image'
										}}
									</Button>
								</div>
							</template>
						</FileUploader>
						<div v-else>
							<div class="flex items-center text-sm">
								<div class="border rounded-md p-2 mr-2">
									<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
								</div>
								<div class="flex flex-col flex-wrap">
									<span class="break-all">
										{{ data[field.name]?.file_name }}
									</span>
									<span class="text-sm text-gray-500 mt-1">
										{{ getFileSize(data[field.name]?.file_size) }}
									</span>
								</div>
								<X
									@click="data[field.name] = null"
									class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
								/>
							</div>
						</div>
					</div>

					<FormControl
						v-else
						:key="field.name"
						v-model="data[field.name]"
						:label="__(field.label)"
						:type="field.type"
						:rows="field.rows"
						:options="field.options"
					/>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { FormControl, FileUploader, Button } from 'frappe-ui'
import { computed } from 'vue'
import { getFileSize, validateFile } from '@/utils'
import { X, FileText } from 'lucide-vue-next'
import Link from '@/components/Controls/Link.vue'
import Codemirror from 'codemirror-editor-vue3'
import 'codemirror/theme/seti.css'
import 'codemirror/mode/htmlmixed/htmlmixed.js'

const props = defineProps({
	fields: {
		type: Array,
		required: true,
	},
	data: {
		type: Object,
		required: true,
	},
})

const columns = computed(() => {
	const cols = []
	let currentColumn = []

	props.fields.forEach((field) => {
		if (field.type === 'Column Break') {
			if (currentColumn.length > 0) {
				cols.push(currentColumn)
				currentColumn = []
			}
		} else {
			if (field.type == 'checkbox') {
				field.value = props.data[field.name] ? true : false
			} else {
				field.value = props.data[field.name]
			}
			currentColumn.push(field)
		}
	})

	if (currentColumn.length > 0) {
		cols.push(currentColumn)
	}

	return cols
})
</script>
