<script lang="ts" setup>
import { computed, ref, watch } from 'vue';

import ActivityTemplateLangEditor from './activity-template-lang-editor.vue';
import { cloneTemplateValue } from './activity-template-shared';

import {
  Empty,
  Form,
  FormItem,
  Input,
  Select,
  Tabs,
  TabPane,
} from 'antdv-next';

const props = defineProps<{
  form: null | Record<string, any>;
}>();

const emit = defineEmits<{
  change: [Record<string, any>];
}>();

const syncing = ref(false);
const formState = ref<null | Record<string, any>>(null);
const activeTab = ref('attr');

const backgroundColorDirections = [
  { label: '无', value: 'NONE' },
  { label: '从左到右渐变', value: 'to right' },
  { label: '从右到左渐变', value: 'to left' },
  { label: '从下到上渐变', value: 'to top' },
  { label: '从上到下渐变', value: 'to bottom' },
  { label: '从左对角渐变', value: 'to bottom right' },
  { label: '从右对角渐变', value: 'to bottom left' },
];

const backgroundImgRepeats = [
  { label: 'repeat', value: 'repeat' },
  { label: 'repeat-x', value: 'repeat-x' },
  { label: 'repeat-y', value: 'repeat-y' },
  { label: 'no-repeat', value: 'no-repeat' },
  { label: 'inherit', value: 'inherit' },
];

const attrForm = computed(() => formState.value?.attr || {});
const styleForm = computed(() => formState.value?.style || {});

watch(
  () => props.form,
  (value) => {
    syncing.value = true;
    formState.value = value ? cloneTemplateValue(value) : null;
    Promise.resolve().then(() => {
      syncing.value = false;
    });
  },
  { deep: true, immediate: true },
);

watch(
  formState,
  (value) => {
    if (syncing.value || !value) {
      return;
    }
    emit('change', cloneTemplateValue(value));
  },
  { deep: true },
);

function hasPath(value: Record<string, any>, path: string) {
  if (!value || !path) {
    return false;
  }
  const keys = path.split('.').filter(Boolean);
  let current: any = value;
  for (const key of keys) {
    if (current == null || !(key in current)) {
      return false;
    }
    current = current[key];
  }
  return true;
}
</script>

<template>
  <div class="attr-editor">
    <Empty v-if="!formState" description="请选择模板节点" />

    <Tabs v-else v-model:activeKey="activeTab" size="small">
      <TabPane key="attr" tab="属性">
        <Form layout="vertical">
          <FormItem v-if="attrForm.id" label="ID">
            <Input :value="String(attrForm.id || '')" disabled />
          </FormItem>
          <FormItem v-if="attrForm.label" label="组件名称">
            <Input :value="String(attrForm.label || '')" disabled />
          </FormItem>
          <FormItem
            v-if="hasPath(attrForm, 'copywriting')"
            :label="String(attrForm.copywriting?.label || '文案')"
          >
            <ActivityTemplateLangEditor
              v-model:modelValue="attrForm.copywriting.i18n"
              :type="attrForm.copywriting?.type"
            />
          </FormItem>
          <template v-if="Array.isArray(attrForm.imgUrls)">
            <FormItem
              v-for="(item, index) in attrForm.imgUrls"
              :key="`${item.id || index}`"
              :label="item.label || `图片${Number(index) + 1}`"
            >
              <Input v-model:value="item.url" />
            </FormItem>
          </template>
        </Form>
      </TabPane>

      <TabPane v-if="!styleForm.hide" key="style" tab="样式">
        <div v-if="styleForm.tips" class="style-tips">
          {{ styleForm.tips }}
        </div>

        <Form layout="vertical">
          <div class="section-title">背景</div>
          <FormItem v-if="hasPath(styleForm, 'background.img.url')" label="背景图">
            <Input v-model:value="styleForm.background.img.url" />
          </FormItem>
          <FormItem v-if="hasPath(styleForm, 'background.img.repeat')" label="背景图重复">
            <Select
              v-model:value="styleForm.background.img.repeat"
              allow-clear
              :options="backgroundImgRepeats"
            />
          </FormItem>
          <FormItem v-if="hasPath(styleForm, 'background.img.size')" label="背景图大小">
            <Input v-model:value="styleForm.background.img.size" placeholder="如 100% 100%" />
          </FormItem>
          <FormItem v-if="hasPath(styleForm, 'background.color.start')" label="背景起始色">
            <Input v-model:value="styleForm.background.color.start" placeholder="#FFFFFF" />
          </FormItem>
          <FormItem v-if="hasPath(styleForm, 'background.color.direction')" label="渐变方向">
            <Select v-model:value="styleForm.background.color.direction" :options="backgroundColorDirections" />
          </FormItem>
          <FormItem
            v-if="
              hasPath(styleForm, 'background.color.end')
                && styleForm.background?.color?.direction !== 'NONE'
            "
            label="背景结束色"
          >
            <Input v-model:value="styleForm.background.color.end" placeholder="#000000" />
          </FormItem>

          <div class="section-title">字体</div>
          <FormItem v-if="hasPath(styleForm, 'font.color')" label="字体颜色">
            <Input v-model:value="styleForm.font.color" placeholder="#FFFFFF" />
          </FormItem>
          <FormItem v-if="hasPath(styleForm, 'font.size')" label="字体大小">
            <Input v-model:value="styleForm.font.size" placeholder=".35rem" />
          </FormItem>
          <FormItem v-if="hasPath(styleForm, 'font.weight')" label="字体粗细">
            <Input v-model:value="styleForm.font.weight" placeholder="bold / 600" />
          </FormItem>

          <div class="section-title">边框</div>
          <FormItem v-if="hasPath(styleForm, 'border.width')" label="边框宽度">
            <Input v-model:value="styleForm.border.width" placeholder=".02rem" />
          </FormItem>
          <FormItem v-if="hasPath(styleForm, 'border.style')" label="边框样式">
            <Input v-model:value="styleForm.border.style" placeholder="solid" />
          </FormItem>
          <FormItem v-if="hasPath(styleForm, 'border.color')" label="边框颜色">
            <Input v-model:value="styleForm.border.color" placeholder="#FFFFFF" />
          </FormItem>
          <FormItem v-if="hasPath(styleForm, 'border.radius')" label="边框圆角">
            <Input v-model:value="styleForm.border.radius" placeholder=".1rem" />
          </FormItem>
        </Form>
      </TabPane>
    </Tabs>
  </div>
</template>

<style scoped>
.attr-editor {
  min-height: 420px;
}

.style-tips {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  color: #1d4ed8;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.section-title {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
</style>
