<template>
  <div
    :class="[
      'ivyforms-theme-card ivyforms-border-radius-8 ivyforms-p-12 ivyforms-flex ivyforms-flex-direction-column ivyforms-gap-10',
      {
        'ivyforms-theme-card--selected': isSelected,
        'ivyforms-theme-card--pro': theme.isPro,
        'ivyforms-theme-card--coming-soon': theme.isComingSoon,
      },
    ]"
    @click="handleSelect"
  >
    <div
      class="ivyforms-theme-card__header ivyforms-flex ivyforms-align-items-center ivyforms-gap-10"
    >
      <div
        class="ivyforms-theme-card__radio-wrapper ivyforms-flex ivyformms-align-items-center ivyforms-gap-12 ivyforms-flex-1"
      >
        <IvyRadio
          v-model="selectedThemeIdLocal"
          priority="secondary"
          type="checkmark"
          :label="theme.id"
          :disabled="theme.isPro || theme.isComingSoon"
        >
          {{ theme.name }}
        </IvyRadio>
      </div>
      <ComingSoonBadge
        v-if="theme.isComingSoon"
        size="s"
        class="ivyforms-theme-card__badge ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-center ivyforms-ml-4 ivyforms-flex-shrink-0"
      />
      <ProBadge
        v-else-if="theme.isPro"
        size="s"
        image="pro-text-with-bolt"
        class="ivyforms-theme-card__badge ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-center ivyforms-ml-4 ivyforms-flex-shrink-0"
      />
      <IvyButtonAction
        v-else
        ref="menuButtonRef"
        size="s"
        priority="tertiary"
        type="ghost"
        icon-start="context-menu-dot"
        icon-start-category="global"
        class="ivyforms-theme-card__menu-button ivyforms-flex-shrink-0"
        :aria-label="theme.name"
        @click.stop="emitMenuClick"
      />
    </div>

    <div
      class="ivyforms-theme-card__preview ivyforms-flex ivyforms-align-items-center ivyforms-border-radius-4 ivyforms-overflow-hidden"
    >
      <div
        class="ivyforms-theme-card__preview-wrapper ivyforms-width-100 ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-center ivyforms-p-12"
        :style="{ backgroundColor: formBackgroundColor }"
      >
        <div
          class="ivyforms-theme-card__preview-content ivyforms-flex ivyforms-align-items-center ivyforms-gap-20"
        >
          <div class="ivyforms-theme-card__preview-text" :style="{ color: textColor }">Aa</div>
          <div
            class="ivyforms-theme-card__preview-controls ivyforms-flex ivyforms-flex-direction-column ivyforms-gap-10"
          >
            <div
              class="ivyforms-theme-card__preview-radio ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-center"
              :style="{ backgroundColor: fieldBorderColor }"
            >
              <div
                class="ivyforms-theme-card__preview-dot"
                :style="{ backgroundColor: fieldBorderColor }"
              />
            </div>
            <div
              class="ivyforms-theme-card__preview-radio ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-center"
              :style="{ backgroundColor: buttonBackgroundColor }"
            >
              <div
                class="ivyforms-theme-card__preview-dot"
                :style="{ backgroundColor: buttonBackgroundColor }"
              />
            </div>
            <div
              class="ivyforms-theme-card__preview-radio ivyforms-flex ivyforms-align-items-center ivyforms-justify-content-center"
              :style="{ backgroundColor: fieldTextColor }"
            >
              <div
                class="ivyforms-theme-card__preview-dot"
                :style="{ backgroundColor: fieldTextColor }"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import type { StyleTheme } from '@/types/form-style'
import { useProFeatureUpgrade } from '@/composables/useProFeatureUpgrade'

const props = defineProps<{
  theme: StyleTheme
  isSelected: boolean
  selectedThemeId: string
}>()

const emit = defineEmits<{
  (e: 'select', themeId: string): void
  (e: 'menu-click', themeId: string, buttonRef?: HTMLElement): void
}>()

const { showUpgradeDialog } = useProFeatureUpgrade()
const menuButtonRef = ref<HTMLElement | null>(null)

const selectedThemeIdLocal = computed({
  get: () => props.selectedThemeId,
  set: (value: string) => {
    emit('select', value)
  },
})

const handleSelect = () => {
  if (props.theme.isComingSoon) {
    return
  }

  if (props.theme.isPro) {
    showUpgradeDialog()
    return
  }

  emit('select', props.theme.id)
}

const emitMenuClick = (e: Event) => {
  e.stopPropagation()
  emit('menu-click', props.theme.id, menuButtonRef.value)
}

const fieldBorderColor = computed(
  () =>
    props.theme.settings.colors?.fieldBorder || props.theme.settings.quickMode?.fieldBorderColor,
)

const textColor = computed(
  () => props.theme.settings.colors?.formTitleColor || props.theme.settings.colors?.fieldText,
)

const formBackgroundColor = computed(() => props.theme.settings.quickMode?.formBackground)

const buttonBackgroundColor = computed(
  () =>
    props.theme.settings.quickMode?.buttonBackground ||
    props.theme.settings.button?.backgroundColor,
)

const fieldTextColor = computed(() => props.theme.settings.quickMode?.fieldText)
</script>

<style scoped lang="scss">
.ivyforms-theme-card {
  background-color: var(--map-ground-level-2-foreground);
  border: 1px solid var(--map-divider);
  cursor: pointer;
  transition: border-color 0.2s ease;

  &:hover:not(&--pro):not(&--coming-soon) {
    border-color: var(--map-base-purple-stroke-0);
  }

  &--selected {
    border-color: var(--map-base-purple-stroke-0);
  }

  &--pro,
  &--coming-soon {
    cursor: not-allowed;
    opacity: 0.8;

    &:hover {
      border-color: var(--map-divider);
    }
  }

  &--coming-soon {
    border-style: dashed;
  }

  &__header {
    height: 28px;
  }

  &__radio-wrapper {
    min-width: 0;
  }

  &__badge {
    :deep(.ivyforms-coming-soon-badge),
    :deep(.ivyforms-pro-badge) {
      display: flex;
    }
  }

  &__preview {
    border: 1px solid var(--map-divider);
    height: 150px;

    &-wrapper {
      height: 100%;
    }

    &-text {
      font-weight: 300;
      font-style: italic;
      font-size: 84px;
      line-height: 94px;
    }

    &-radio {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid var(--map-divider);
      position: relative;
      border-color: var(--map-base-dusk-fill-0);
    }

    &-dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
    }
  }
}
</style>
