import { computed, defineComponent, reactive } from 'vue'
import useLayoutStore from '../useLayoutStore'
import { ConfigProvider, Form, Input, theme } from 'ant-design-vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdUpload, MdImage } from 'oh-vue-icons/icons'

addIcons(MdUpload, MdImage)

const TypeSelector = defineComponent({
  props: {
    value: {
      type: Number,
      default: 0
    },
    icon: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: ''
    }
  },
  emits: {
    'update:value': (() => true) as (val: number) => boolean,
    'update:icon': (() => true) as (val: string) => boolean
  },
  setup(props, ctx) {
    return () => (
      <div class="flex gap-4">
        <div
          class="w-[64px] h-[65px] bg-center bg-no-repeat bg-cover rounded-lg overflow-hidden flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
          style={{
            backgroundImage: `url('${props.icon}')`,
            backgroundColor: props.icon ? '' : 'rgba(0,0,0,0.2)'
          }}
        >
          {!props.icon && <OhVueIcon name="md-image" fill="white" scale={1.8} />}
        </div>
        <div
          class="w-[64px] h-[65px] bg-center bg-no-repeat bg-cover rounded-lg overflow-hidden flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
          style={{
            backgroundColor: props.background
          }}
        >
          <span
            class="text-[30px]"
            style={{
              color: props.color
            }}
          >
            {props.text ? props.text.substring(0, 2) : 'A'}
          </span>
        </div>
        <div class="w-[64px] h-[65px] rounded-lg flex justify-center items-center bg-white shadow cursor-pointer hover:scale-105 transition-all">
          <OhVueIcon name="md-upload" fill="rgba(0,0,0,0.4)" scale={1.8} />
        </div>
      </div>
    )
  }
})

export default defineComponent({
  props: {
    mode: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 0
    }
  },
  setup(props, ctx) {
    const layout = useLayoutStore()
    const isGame = computed(() => layout.state.current === 0)
    const form = reactive({
      link: '',
      name: '',
      text: '',
      background: '#f7a94e',
      color: 'rgba(255,255,255,1)',
      icon: '',
      type: 0 // 0 默认，1 文字
    })
    return () => (
      <div
        class={
          'absolute left-0 top-0 w-full h-full rounded-lg p-4 ' +
          (isGame.value ? 'bg-white/10' : 'bg-white/80')
        }
      >
        <ConfigProvider
          theme={{
            token: isGame.value
              ? theme.darkAlgorithm(theme.defaultSeed)
              : theme.defaultAlgorithm(theme.defaultSeed)
          }}
        >
          <Form labelCol={{ span: 6 }} model={form} class="grid grid-cols-2 gap-4" colon={false}>
            <Form.Item label="地址" name="link" class="col-span-2" labelCol={{ span: 3 }}>
              <Input v-model:value={form.link} />
            </Form.Item>
            <Form.Item label="名称" name="name">
              <Input v-model:value={form.name} />
            </Form.Item>
            <Form.Item name="type" label=" " class="col-span-2" labelCol={{ span: 3 }}>
              <TypeSelector
                v-model:value={form.type}
                v-model:icon={form.icon}
                text={form.text}
                color={form.color}
                background={form.background}
              />
            </Form.Item>
            <Form.Item label="图标文字" name="text">
              <Input v-model:value={form.text} />
            </Form.Item>
          </Form>
        </ConfigProvider>
      </div>
    )
  }
})