<script setup lang="ts">
import { __ } from '@wordpress/i18n'
import { toRefs, computed, ref } from 'vue'
import {
  getI18n,
} from '@/helper'
import { getSavetoWishlistObj } from '@/config'

const props = defineProps({
  selected_value: {
    type: String,
    required: true
  },
  preview_options: {
    type: Object,
    required: true
  },
  controls: {
    type: Array,
    required: true
  },
})

const { selected_value, preview_options, controls } = toRefs(props)

const controlFields = ref<any[]>(controls.value ?? [])

const placeholderText = getI18n('save_to_wishlist', __( 'SaveTo Wishlist', 'saveto-wishlist-lite-for-woocommerce' ))

const icon = computed(() => {
  return selected_value.value.split('_')[0] === 'icon' ? 'heart' : selected_value.value.split('_')[0] === 'solid' ? 'solid' : 'minimal'
})
const text = computed(() => {
  return selected_value.value.includes('text') ? true : false
})
const text_color_control = computed(() => {
  const textColor = controlFields.value.find((control: any) => control.id === preview_options.value.text_color)
  return textColor?.default ?? '#000000'
})
const hover_text_color_control = computed(() => {
  const hoverTextColor = controlFields.value.find((control: any) => control.id === preview_options.value.hover_text_color)
  return hoverTextColor?.default ?? '#000000'
})
const background_color_control = computed(() => {
  const backgroundColor = controlFields.value.find((control: any) => control.id === preview_options.value.background_color)
  return backgroundColor?.default ?? '#000000'
})
const hover_background_color_control = computed(() => {
  const hoverBackgroundColor = controlFields.value.find((control: any) => control.id === preview_options.value.hover_background_color)
  return hoverBackgroundColor?.default ?? '#000000'
})
const border_color_control = computed(() => {
  const borderColor = controlFields.value.find((control: any) => control.id === preview_options.value.border_color)
  return borderColor?.default ?? '#000000'
})
const hover_border_color_control = computed(() => {
  const hoverBorderColor = controlFields.value.find((control: any) => control.id === preview_options.value.hover_border_color)
  return hoverBorderColor?.default ?? '#000000'
})
const border_width_control = computed(() => {
  const borderWidth = controlFields.value.find((control: any) => control.id === preview_options.value.border_width)
  return borderWidth?.default ?? 1
})
const icon_color_control = computed(() => {
  const iconColor = controlFields.value.find((control: any) => control.id === preview_options.value.icon_color)
  return iconColor?.default ?? '#FF0000'
})
const text_size_control = computed(() => {
  const textSize = controlFields.value.find((control: any) => control.id === preview_options.value.text_size)
  return textSize?.default ?? 14
})
const text_style_control = computed(() => {
  const textStyle = controlFields.value.find((control: any) => control.id === preview_options.value.text_style)
  return textStyle?.default ?? 'normal'
})
</script>
<template>
  <button
    type="button"
    :class="`save-to-wishlist-button stw-wishlist-button-style-${selected_value}`"
    :style="{
      '--background-color': background_color_control,
      '--border-color': border_color_control,
      '--text-color': text_color_control,
      '--hover-background-color': hover_background_color_control,
      '--hover-border-color': hover_border_color_control,
      '--hover-text-color': hover_text_color_control,
      '--text-size': text_size_control + 'px',
      '--text-style': text_style_control,
      backgroundColor: background_color_control,
      borderColor: border_color_control,
      color: text_color_control,
      borderWidth: border_width_control + 'px'
    }"
  >
    <span class="stw-icon-wrapper">
      <span class="stw-icon-holder" v-if="icon === 'heart'">
        <svg class="stw-icon stw-icon-heart selected-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17" fill="none"><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" :fill="icon_color_control"/></g><defs><clipPath id="clip0_1_56"><rect width="20" height="17" fill="white"/></clipPath></defs></svg>
        <svg class="stw-icon stw-icon-heart hover-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17" fill="none"><path d="M10.0054 16.8252C9.55601 16.8252 9.11447 16.7002 8.73155 16.4618C6.75832 15.231 4.91794 13.5 4.03096 12.6716L4.01533 12.656C2.92908 11.6323 1.38566 10.0732 0.529947 8.31101C-0.106956 6.99422 -0.173382 5.39219 0.350208 3.9152C0.873797 2.42649 1.93661 1.2152 3.26121 0.586108C4.08176 0.199277 4.91403 0 5.73849 0C7.1178 0 8.51664 0.547034 10.0014 1.66845C11.4863 0.547034 12.8851 0 14.2644 0C15.6437 0 15.9211 0.195369 16.7417 0.586108C18.0663 1.2152 19.1291 2.42649 19.6527 3.9152C20.1724 5.39219 20.1059 6.99422 19.4729 8.31101C18.6211 10.0732 17.0777 11.6362 15.9876 12.656L15.9719 12.6716C15.0889 13.5039 13.2446 15.231 11.2713 16.4618C10.8962 16.7002 10.4547 16.8252 10.0054 16.8252Z" :fill="icon_color_control"/>
        <path d="M19.1252 8.13908C18.3515 9.7372 16.9761 11.1947 15.7258 12.3708C14.8271 13.2148 13.0258 14.9106 11.0721 16.1297C10.4195 16.5361 9.59117 16.5361 8.93863 16.1297C6.98885 14.9106 5.18364 13.2148 4.28494 12.3708C3.03457 11.1947 1.65917 9.73329 0.885512 8.13908C-0.364851 5.55239 0.865975 2.15297 3.43313 0.93777C5.86743 -0.214909 8.00086 0.574383 10.0053 2.16078C12.0098 0.574383 14.1433 -0.214909 16.5776 0.93777C19.1447 2.15297 20.3755 5.55239 19.1252 8.13908Z" :fill="icon_color_control"/></svg>
      </span>
      <span class="stw-icon-holder" v-else-if="icon === 'solid'">
        <svg class="stw-icon stw-icon-solid selected-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><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" :fill="icon_color_control"/></svg>
        <svg class="stw-icon stw-icon-solid hover-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17" fill="none"><g clip-path="url(#clip0_1_44)"><path d="M9.56522 16.745C9.3913 16.745 9.21739 16.745 9.04348 16.66C8.69565 16.575 8.43478 16.32 8.08696 15.98C6.08696 14.28 2.60869 11.135 1.30435 9.52C-0.695654 6.97 -0.347828 3.485 2.17391 1.36C4.34782 -0.424999 7.3913 -0.339999 9.56522 1.53C11.7391 -0.339999 14.6957 -0.424999 16.9565 1.36C19.4783 3.4 19.913 6.97 17.8261 9.52C16.5217 11.135 13.0435 14.28 11.0435 15.98C10.6957 16.32 10.4348 16.49 10.087 16.66C9.91304 16.66 9.73913 16.745 9.56522 16.745ZM5.73913 1.7C4.86956 1.7 4.08696 1.955 3.30435 2.635C1.47826 4.165 1.21739 6.63 2.60869 8.5C3.91304 10.115 7.65217 13.43 9.21739 14.79C9.3913 14.96 9.56522 15.045 9.56522 15.13C9.56522 15.13 9.73913 14.96 9.82609 14.79C11.3913 13.43 15.1304 10.115 16.4348 8.5C17.913 6.63 17.6522 4.165 15.8261 2.635C13.913 1.02 11.5652 1.7 10.2609 3.23C9.91304 3.57 9.30435 3.57 8.95652 3.23C8.08696 2.295 6.95652 1.7 5.73913 1.7ZM8.69565 10.2C8.43478 10.2 8.26087 10.115 8.08696 9.945L6.34782 8.245C6 7.905 6 7.395 6.34782 7.055C6.69565 6.715 7.21739 6.715 7.56522 7.055L8.69565 8.16L12 4.93C12.3478 4.59 12.8696 4.59 13.2174 4.93C13.5652 5.27 13.5652 5.78 13.2174 6.12L9.30435 9.945C9.13043 10.115 8.95652 10.2 8.69565 10.2Z" :fill="icon_color_control"/></g><defs><clipPath id="clip0_1_44"><rect width="20" height="17" fill="white"/></clipPath></defs></svg>
      </span>
      <span class="stw-icon-holder" v-else-if="icon === 'minimal'">
        <svg class="stw-icon stw-icon-minimal selected-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24" fill="none"><g clip-path="url(#clip0_1_48)"><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" :fill="icon_color_control"/><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" :fill="icon_color_control"/></g><defs><clipPath id="clip0_1_48"><rect width="20" height="24" fill="white"/></clipPath></defs></svg>
        <svg class="stw-icon stw-icon-minimal hover-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24" fill="none"><g clip-path="url(#clip0_1_46)"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 7.6C20 5.2 18.48 3.16 16.36 2.36C16.16 1.04 15 0 13.6 0H6.4C5 0 3.84 1 3.64 2.36C1.52 3.16 0 5.2 0 7.6V18.4C0 21.48 2.52 24 5.6 24H14.4C17.48 24 20 21.48 20 18.4V7.6ZM6.4 1.6C5.72 1.6 5.2 2.12 5.2 2.8C5.2 3.48 5.72 4 6.4 4H13.6C14.28 4 14.8 3.48 14.8 2.8C14.8 2.12 14.28 1.6 13.6 1.6H6.4ZM4.92 10.2C6.2 8.88 8.28 8.88 9.56 10.2L10 10.64L10.44 10.2C11.72 8.88 13.8 8.88 15.08 10.2C16.28 11.44 16.28 13.44 15.08 14.72L10.56 19.36C10.4 19.52 10.2 19.6 10 19.6C9.8 19.6 9.56 19.52 9.44 19.36L4.92 14.72C3.72 13.48 3.72 11.48 4.92 10.2Z" :fill="icon_color_control"/></g><defs><clipPath id="clip0_1_46"><rect width="20" height="24" fill="white"/></clipPath></defs></svg>
      </span>
      <span v-if="text" class="stw-text-holder">{{ placeholderText }}</span>
    </span>
  </button>
</template>

<style scoped lang="scss">
  button.save-to-wishlist-button {
    padding: 3px 8px;
    white-space: nowrap;
    margin: 5px 0;
    font-size: 12px;
    cursor: pointer;

    .stw-icon {
      margin-right: 5px;
    }

    .hover-icon {
      display: none;
    }

    .selected-icon {
      display: inline-block;
    }

    &:hover {
      background-color: var(--hover-background-color) !important;
      border-color: var(--hover-border-color) !important;
      color: var(--hover-text-color) !important;

      .hover-icon {
        display: inline-block;
      }

      .selected-icon {
        display: none;
      }
    }

    &.stw-wishlist-button-style-icon_and_text,
    &.stw-wishlist-button-style-solid_and_text,
    &.stw-wishlist-button-style-minimal_and_text {
        background: none;
        border: none;
        outline: none;
        border-radius: 16px;
    }

    &.stw-wishlist-button-style-text_only,
    &.stw-wishlist-button-style-icon_and_text_pill,
    &.stw-wishlist-button-style-solid_and_text_pill,
    &.stw-wishlist-button-style-minimal_and_text_pill {
        background: none;
        border: 1px solid #000;
        outline: none;
        border-radius: 16px;
    }

    &.stw-wishlist-button-style-icon_only,
    &.stw-wishlist-button-style-solid_icon,
    &.stw-wishlist-button-style-minimal_icon {
      background: none !important;
      border: none !important;
      cursor: pointer;
      outline: none;
      box-shadow: none;
    }

    /* Heart */
    .stw-icon-heart {
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-position: center;
      vertical-align: middle;
      margin-right: 5px;
    }

    /* Solid */
    .stw-icon-solid {
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-position: center;
      vertical-align: middle;
      margin-right: 5px;
    }

    /* Minimal */
    .stw-icon-minimal {
      width: 18px;
      height: 25px;
      vertical-align: middle;
      margin-right: 5px;
    }

    &.stw-wishlist-button-style-text_only {
      .stw-icon-holder {
        display: none;
      }
    }

    .stw-text-holder {
      font-size: var(--text-size);
      font-style: var(--text-style);
    }
  }
</style>