<script setup lang="ts">
import { toRefs, ref } from 'vue'
import { __ } from '@wordpress/i18n'
import {
  LabelControl,
  Tooltip,
} from './index'
import {
  purifyHtml,
} from '@/helper'
import { useSettingsStore } from '@/stores/settings-store'
import { storeToRefs } from 'pinia'

const props = defineProps({
  params: {
    type: Object,
    required: true,
  },
})

const { params } = toRefs(props)
const arg = params.value

const settingsStore = useSettingsStore()
const {
  inputValues,
} = storeToRefs(settingsStore)

const presets = ref<any>(arg['presets'] || [])
const selectedPreset = ref<string>(arg['default'] ?? 'minimal_dark')

const emit = defineEmits(['fieldData'])

const applyPreset = (presetKey: string) => {
  selectedPreset.value = presetKey
  const preset = presets.value[presetKey]
  
  if (preset && preset.settings) {
    const presetSettings: any = {}
    
    // Apply all settings from the preset
    Object.keys(preset.settings).forEach((key) => {
      presetSettings[key] = preset.settings[key]
      inputValues.value[key] = preset.settings[key]
    })

    // Save the selected preset key to the input values.
    inputValues.value[arg['id']] = presetKey
    
    emit('fieldData', presetSettings)
  }
}

const getIconType = (preset: any) => {
  const settings = preset.settings || {}
  let buttonStyle = 'icon_and_text'
  
  // Find the button style from settings
  Object.keys(settings).forEach((key) => {
    if (key.includes('_style') && !key.includes('text_style')) {
      buttonStyle = settings[key]
    }
  })
  
  // Determine icon type based on button style prefix
  const stylePrefix = buttonStyle.split('_')[0]
  if (stylePrefix === 'icon') return 'heart'
  if (stylePrefix === 'solid') return 'solid'
  if (stylePrefix === 'minimal') return 'minimal'
  return 'heart'
}

const getPresetPreviewStyle = (preset: any) => {
  const settings = preset.settings || {}
  
  // Extract colors from the full WordPress option names
  // Find the first matching key pattern for each color type
  let textColor = '#000000'
  let backgroundColor = '#FFFFFF'
  let borderColor = '#000000'
  let borderWidth = 1
  let textSize = 14
  let textStyle = 'normal'
  
  // Extract values from settings object
  Object.keys(settings).forEach((key) => {
    if (key.includes('_text_color') && !key.includes('hover') && !key.includes('icon')) {
      textColor = settings[key]
    } else if (key.includes('_background_color') && !key.includes('hover')) {
      backgroundColor = settings[key]
    } else if (key.includes('_border_color') && !key.includes('hover')) {
      borderColor = settings[key]
    } else if (key.includes('_border_width')) {
      borderWidth = settings[key]
    } else if (key.includes('_text_size')) {
      textSize = settings[key]
    } else if (key.includes('_text_style')) {
      textStyle = settings[key]
    }
  })
  
  return {
    color: textColor,
    backgroundColor: backgroundColor,
    borderColor: borderColor,
    borderWidth: `${borderWidth}px`,
    borderStyle: borderWidth > 0 ? 'solid' : 'none',
    padding: '8px 16px',
    borderRadius: preset.pill ? '20px' : '4px',
    fontSize: `${textSize}px`,
    fontStyle: textStyle,
    display: 'inline-flex',
    alignItems: 'center',
    gap: '8px',
    cursor: 'pointer',
    transition: 'all 0.2s ease'
  }
}

const getIconStyle = (preset: any) => {
  const settings = preset.settings || {}
  
  // Find icon_color from settings
  let iconColor = '#FF0000'
  Object.keys(settings).forEach((key) => {
    if (key.includes('_icon_color') && !key.includes('hover')) {
      iconColor = settings[key]
    }
  })
  
  return {
    fill: iconColor,
    width: '16px',
    height: '16px'
  }
}
</script>

<template>
  <div>
    <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-mb-2 stwlite-tw-gap-2">
      <LabelControl :params="arg" />
    </div>
    
    <div class="stwlite-tw-mb-4">
      <p v-if="arg['description']" class="stwlite-tw-text-sm stwlite-tw-text-gray-600 stwlite-tw-mb-4" v-html="purifyHtml(arg?.['description'] ?? '')" />
      
      <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 md:stwlite-tw-grid-cols-2 lg:stwlite-tw-grid-cols-3 stwlite-tw-gap-4">
        <div
          v-for="(preset, presetKey) in presets"
          :key="presetKey"
          class="stwlite-tw-border stwlite-tw-rounded-lg stwlite-tw-p-4 stwlite-tw-cursor-pointer stwlite-tw-transition-all hover:stwlite-tw-shadow-md"
          :class="{
            'stwlite-tw-border-blue-500 stwlite-tw-bg-blue-50': selectedPreset === String(presetKey),
            'stwlite-tw-border-gray-200': selectedPreset !== String(presetKey)
          }"
          @click="applyPreset(String(presetKey))"
        >
          <div class="stwlite-tw-mb-3">
            <h4 class="stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-mb-1 stwlite-tw-text-base stwlite-tw-mt-0">
              {{ preset.label }}
            </h4>
            <p class="stwlite-tw-text-xs stwlite-tw-text-gray-500 stwlite-tw-mb-0">
              {{ preset.description }}
            </p>
          </div>
          
          <div class="stwlite-tw-flex stwlite-tw-justify-center stwlite-tw-items-center stwlite-tw-py-4">
            <div :style="getPresetPreviewStyle(preset)">
              <span v-if="preset.show_icon !== false" class="stwlite-tw-inline-flex stwlite-tw-items-center">
                <!-- Heart Icon (for icon_* styles) -->
                <svg
                  v-if="getIconType(preset) === 'heart'"
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="17"
                  viewBox="0 0 20 17"
                  fill="none"
                  :style="getIconStyle(preset)"
                >
                  <g clip-path="url(#clip0_1_56)">
                    <path d="M19.6527 3.95588C19.1291 2.4517 18.0663 1.22782 16.7417 0.592197C15.9211 0.197399 15.085 0 14.2644 0C12.8851 0 11.4863 0.552717 10.0014 1.68579C8.51664 0.552717 7.1178 0 5.73849 0C4.35919 0 4.08176 0.201347 3.26121 0.592197C1.93661 1.22782 0.873797 2.4517 0.350208 3.95588C-0.173382 5.44821 -0.106956 7.06688 0.529947 8.39735C1.38566 10.1779 2.92908 11.7531 4.01533 12.7875L4.03096 12.8033C4.91794 13.6403 6.75832 15.3892 8.73155 16.6328C9.11447 16.8737 9.55601 17 10.0054 17C10.4547 17 10.8962 16.8737 11.2713 16.6328C13.2446 15.3892 15.0889 13.6442 15.9719 12.8033L15.9876 12.7875C17.0777 11.7571 18.6211 10.1779 19.4729 8.39735C20.1059 7.06688 20.1724 5.44821 19.6527 3.95588ZM19.1252 8.22364C18.3515 9.83837 16.9761 11.311 15.7258 12.4993C14.8271 13.3521 13.0258 15.0655 11.0721 16.2973C10.4195 16.7079 9.59117 16.7079 8.93864 16.2973C6.98885 15.0655 5.18364 13.3521 4.28494 12.4993C3.03458 11.311 1.65918 9.83442 0.885519 8.22364C-0.364844 5.61008 0.865983 2.17534 3.43313 0.947515C5.86744 -0.217139 8.00087 0.580353 10.0054 2.18323C12.0098 0.580353 14.1433 -0.217139 16.5776 0.947515C19.1447 2.17534 20.3756 5.61008 19.1252 8.22364Z" />
                  </g>
                </svg>
                
                <!-- Solid Icon (for solid_* styles) -->
                <svg
                  v-else-if="getIconType(preset) === 'solid'"
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="none"
                  :style="getIconStyle(preset)"
                >
                  <path d="M9.99999 18.0655C9.83333 18.0655 9.66666 18.0655 9.49999 17.9821C9.16666 17.8988 8.91666 17.6488 8.58333 17.3155C6.66666 15.6488 3.33333 12.5655 2.08333 10.9821C0.166659 8.48213 0.499993 5.06546 2.91666 2.98213C4.99999 1.23213 7.91666 1.31546 9.99999 3.1488C12.0833 1.31546 14.9167 1.23213 17.0833 2.98213C19.5 4.98213 19.9167 8.48213 17.9167 10.9821C16.6667 12.5655 13.3333 15.6488 11.4167 17.3155C11.0833 17.6488 10.8333 17.8155 10.5 17.9821C10.3333 17.9821 10.1667 18.0655 9.99999 18.0655ZM6.33333 3.31546C5.49999 3.31546 4.74999 3.56546 3.99999 4.23213C2.24999 5.73213 1.99999 8.1488 3.33333 9.98213C4.58333 11.5655 8.16666 14.8155 9.66666 16.1488C9.83333 16.3155 9.99999 16.3988 9.99999 16.4821C9.99999 16.4821 10.1667 16.3155 10.25 16.1488C11.75 14.8155 15.3333 11.5655 16.5833 9.98213C18 8.1488 17.75 5.73213 16 4.23213C14.1667 2.6488 11.9167 3.31546 10.6667 4.81546C10.3333 5.1488 9.74999 5.1488 9.41666 4.81546C8.58333 3.8988 7.49999 3.31546 6.33333 3.31546Z" />
                </svg>
                
                <!-- Minimal Icon (for minimal_* styles) -->
                <svg
                  v-else-if="getIconType(preset) === 'minimal'"
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="24"
                  viewBox="0 0 20 24"
                  fill="none"
                  :style="getIconStyle(preset)"
                >
                  <g clip-path="url(#clip0_minimal)">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.59078 9.5625C8.4003 8.325 6.46578 8.325 5.2753 9.5625C4.15923 10.725 4.15923 12.6 5.2753 13.8L9.47917 18.15C9.62798 18.3 9.81399 18.375 10 18.375C10.186 18.375 10.4092 18.3 10.5208 18.15L14.7247 13.8C15.8408 12.6375 15.8408 10.7625 14.7247 9.5625C13.5342 8.325 11.5997 8.325 10.4092 9.5625L10 9.975L9.59078 9.5625ZM6.35417 10.575C6.94941 9.9375 7.95387 9.9375 8.54911 10.575L9.47917 11.55C9.62798 11.7 9.81399 11.775 10 11.775C10.186 11.775 10.4092 11.7 10.5208 11.55L11.4509 10.575C12.0461 9.9375 13.0506 9.9375 13.6458 10.575C14.2039 11.175 14.2039 12.1125 13.6458 12.7125L10 16.5375L6.35417 12.7125C5.79614 12.1125 5.79614 11.175 6.35417 10.575Z" />
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.3006 7.875C19.3006 5.625 17.8869 3.7125 15.9152 2.9625C15.7292 1.725 14.6503 0.75 13.3482 0.75H6.65178C5.3497 0.75 4.27083 1.6875 4.08482 2.9625C2.11309 3.7125 0.699402 5.625 0.699402 7.875V18C0.699402 20.8875 3.04315 23.25 5.90774 23.25H14.0923C16.9568 23.25 19.3006 20.8875 19.3006 18V7.875ZM2.1875 7.875C2.1875 6.375 3.04315 5.1 4.30803 4.5C4.71726 5.4 5.61012 6 6.65178 6H13.3482C14.3899 6 15.2827 5.4 15.692 4.5C16.9568 5.1 17.8125 6.375 17.8125 7.875V18C17.8125 20.0625 16.1384 21.75 14.0923 21.75H5.90774C3.8616 21.75 2.1875 20.0625 2.1875 18V7.875ZM6.65178 2.25C6.01934 2.25 5.53571 2.7375 5.53571 3.375C5.53571 4.0125 6.01934 4.5 6.65178 4.5H13.3482C13.9807 4.5 14.4643 4.0125 14.4643 3.375C14.4643 2.7375 13.9807 2.25 13.3482 2.25H6.65178Z" />
                  </g>
                </svg>
              </span>
              <span v-if="preset.show_text !== false">{{ preset.preview_text || __('Save to Wishlist', 'saveto-wishlist-lite-for-woocommerce') }}</span>
            </div>
          </div>
          
          <div class="stwlite-tw-mt-3 stwlite-tw-text-center">
            <span
              class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-3 stwlite-tw-py-1 stwlite-tw-rounded-full stwlite-tw-text-xs stwlite-tw-font-medium"
              :class="{
                'stwlite-tw-bg-blue-100 stwlite-tw-text-blue-700': selectedPreset === String(presetKey),
                'stwlite-tw-bg-gray-100 stwlite-tw-text-gray-600': selectedPreset !== String(presetKey)
              }"
            >
              <svg
                v-if="selectedPreset === String(presetKey)"
                class="stwlite-tw-w-4 stwlite-tw-h-4 stwlite-tw-mr-1"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
              </svg>
              {{ selectedPreset === String(presetKey) ? __('Selected', 'saveto-wishlist-lite-for-woocommerce') : __('Select', 'saveto-wishlist-lite-for-woocommerce') }}
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <Tooltip :params="arg" />
  </div>
</template>

<style scoped lang="scss">
h4 {
  margin-top: 0;
}
</style>
