{{!--
  Renders CustoMeow Custom Data for Shopline Theme 2.0

  Accepts:
  - properties: {Array} Cart item properties
  - title: {String} Custom data title (optional)
  - enable_dark: {Boolean} Website dark mode, default is false (optional)
  - text_color: {String} text color, hex or rgba, default is oklch(37.3% .034 259.733), enable_dark text color is white. (optional)
  - preview_font_size: {Number} Preview text font size (optional), 12~16, default is 12
  - preview_image_width: {Number} Preview image width (optional), default is 60
  - preview_image_radius: {Number} Preview image border radius (optional), default is 6
  - enable_modal: {Boolean} Show image modal when true
  - modal_background_color: '' {String} Image modal background color, hex or rgba, default is black (optional)
  - cart_item_id: {String} Cart item id (optional)
  - cart_item_image_classname: {String} Preview first image cover thumbnail (optional)

  Usage:
  {{> customeow-data properties=item.properties title='Your personalization' preview_font_size=12 preview_image_width=60 preview_image_radius=6 enable_modal=true}}
--}}

{{assign "show_title" true}}
{{#unless title}}
  {{assign "show_title" false}}
{{/unless}}

{{assign "is_dark" false}}
{{#if enable_dark}}
    {{assign "is_dark" true}}
{{/if}}

{{assign "label_color" "oklch(37.3% .034 259.733)"}}
{{#if text_color}}
    {{assign "label_color" text_color}}
{{/if}}

{{#if preview_font_size}}
  {{#if preview_font_size < 12 or preview_font_size > 16}}
    {{assign "preview_font_size" 12}}
  {{/if}}
{{else}}
  {{assign "preview_font_size" 12}}
{{/if}}

{{#unless preview_image_width}}
  {{assign "preview_image_width" 60}}
{{/unless}}

{{assign "preview_modal_radius" 12}}
{{assign "preview_modal_inner_radius" 11}}
{{#if preview_image_radius}}
  {{assign "preview_modal_radius" (times preview_image_radius 2)}}
  {{assign "preview_modal_inner_radius" (minus preview_modal_radius 1)}}
{{/if}}

{{assign "enable_image_modal" true}}
{{#unless enable_modal}}
  {{assign "enable_image_modal" false}}
{{/unless}}

{{#unless modal_background_color}}
  {{assign modal_background_color 'black'}}
{{/unless}}

{{assign "item_id" ''}}
{{#if cart_item_id}}
    {{assign "item_id" cart_item_id}}
{{/if}}

{{assign "cart_item_class" ''}}
{{#if cart_item_image_classname}}
    {{assign "cart_item_class" cart_item_image_classname}}
{{/if}}

{{assign "property_texts" ''}}
{{assign "property_orginal_images" ''}}
{{#for properties as |property|}}
    {{#if property.name == "preview.texts"}}
        {{assign "property_texts" (split property.value ',')}}
    {{else if property.name == "preview.effects" or property.name == "preview.images"}}
        {{#if (size property_orginal_images) > 0}}
            {{assign "property_orginal_images" (append property_orginal_images (append ',' property.value))}}
        {{else}}
            {{assign "property_orginal_images" property.value}}
        {{/if}}
    {{/if}}
{{/for}}
{{assign "property_images" (split property_orginal_images ',')}}


{{#if enable_image_modal}}
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
{{/if}}

<style>
  .cm-customization {
    margin-top: 20px;
  }
  .cm-customization-title {
    font-size: 14px;
    font-weight: 500;
    color: {{#if is_dark}}white{{else}}{{label_color}}{{/if}};
  }
  .cm-customization-container {
    padding: 4px 0 8px;
    display: none;
  }
  .cm-customization-container.active {
    display: block;
  }
  .cm-customization-texts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .cm-customization-texts-tag {
    padding: 2px 4px;
    border-radius: 4px;
    background-color: {{#if is_dark}}rgba(255,255,255,0.06){{else}}rgba(0,0,0,0.06){{/if}};
    color: {{#if is_dark}}white{{else}}{{label_color}}{{/if}};
    font-size: {{preview_font_size}}px;
  }
  .cm-customization-images {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .cm-customization-images-thumbnail {
    width: {{preview_image_width}}px;
    border-radius: {{preview_image_radius}}px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1;
  }
  .cm-customization-images-thumbnail.cursor-pointer {
    cursor: pointer;
  }
  .cm-customization-images-thumbnail:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid {{#if is_dark}}rgba(255,255,255,0.2){{else}}rgba(0,0,0,0.2){{/if}};
    border-radius: {{preview_image_radius}}px;
  }
  .cm-customization-images-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cm-customization-images-thumbnail-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all cubic-bezier(0.33, 1, 0.68, 1) 200ms;
  }
  .cm-customization-images-thumbnail:hover .cm-customization-images-thumbnail-mask {
    opacity: 1;
  }
  .cm-customization-images-thumbnail-svg {
    width: 20px;
    height: 20px;
  }

  .cm-customization-transition {
    transition: all 200ms cubic-bezier(0.33, 1, 0.68, 1);
  }
  .cm-customization-bg-from {
    opacity: 0;
  }
  .cm-customization-bg-to {
    opacity: 1;
  }
  .cm-customization-modal-from {
    opacity: 0;
    transform: scale(0.94);
  }
  .cm-customization-modal-to {
    opacity: 1;
    transform: scale(1);
  }
  .cm-customization-close-from {
    opacity: 0;
    transform: translateY(10px);
  }
  .cm-customization-close-to {
    opacity: 1;
    transform: translateY(0);
  }
  .cm-customization-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .cm-customization-modal-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    z-index: 0;
  }
  .cm-customization-splide {
    width: 80%;
    aspect-ratio: 1 / 1;
    background-color: {{modal_background_color}};
    position: relative;
    z-index: 1;
    border-radius: {{preview_modal_radius}}px;
    overflow: hidden;
  }
  .cm-customization-splide:before {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: {{preview_modal_inner_radius}}px;
    z-index: 10;
    pointer-events: none;
  }
  .cm-customization-splide .cm-customization-splide-frame,
  .cm-customization-splide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cm-customization-splide .cm-customization-splide-frame {
    aspect-ratio: 1 / 1;
    position: relative;
  }
  .cm-customization-splide .cm-customization-splide-button {
    display: none;
  }
  .cm-customization-splide:hover .cm-customization-splide-button {
    display: block;
  }
  .cm-customization-splide-button {
    width: 36px;
    height: 36px;
    background-color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-radius: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .cm-customization-splide-button span {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cm-customization-splide-button span svg {
    width: 16px;
    height: 16px;
    fill: oklch(44.6% 0.03 256.802);
  }
  .cm-customization-splide-left {
    left: 12px;
  }
  .cm-customization-splide-right {
    right: 12px;
  }
  .cm-customization-modal-close {
    width: 36px;
    height: 36px;
    border: 2px solid white;
    border-radius: 100%;
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    cursor: pointer;
  }
  .cm-customization-modal-close svg {
    width: 20px;
    height: 20px;
  }
  @media (width >= 640px) {
    .cm-customization-splide {
      width: 480px;
    }
  }
  {{#if item_id and cart_item_class}}
    #{{item_id}} .{{cart_item_class}} {
      position: relative;
    }
    #{{item_id}} .{{cart_item_class}}:before {
      content: '';
      width: 100%;
      height: 100%;
      background-image: url({{first (split property_orginal_images ',')}});
      background-position: center top;
      background-size: contain;
      background-color: white;
      background-repeat: no-repeat;
      position: absolute;
      left: 0;
      top: 0;
    }
  {{/if}}
</style>

<div class="cm-customization">
  {{#if show_title}}
    <div class="cm-customization-title">{{ title }}</div>
  {{/if}}
  <div class="cm-customization-container" :class="init ? 'active' : ''"
  x-data="{
    init: false,
    openModal: false,
    previewIndex: 0,
    imageArray: [],
    currentImageUrl: '',
    showSlideLeftButton: false,
    showSlideRightButton: false
  }"
  x-init="init = true">
    {{!-- texts --}}
    {{#if (size property_texts) > 0 }}
      <div class="cm-customization-texts">
        {{#for property_texts as |item| }}
          <span class="cm-customization-texts-tag">{{ item }}</span>
        {{/for}}
      </div>
    {{/if}}
    {{!-- preview thumbnail --}}
    {{#if (size property_images) > 0}}
    <div class="cm-customization-images">
        {{#for property_images as |item|}}
            <div class="cm-customization-images-thumbnail {{#if enable_image_modal}}cursor-pointer{{/if}}" 
                x-data="{
                index: {{ forloop.index0 }},
                propertyImages: '{{ property_orginal_images }}'
                }"
                @click="
                previewIndex = index
                imageArray = propertyImages.split(',')
                if (imageArray.length > 1) {
                    if (index > 0 && index < imageArray.length - 1) {
                    showSlideLeftButton = true
                    showSlideRightButton = true
                    } else if (index === 0) {
                    showSlideLeftButton = false
                    showSlideRightButton = true
                    } else if (index === imageArray.length - 1) {
                    showSlideLeftButton = true
                    showSlideRightButton = false
                    }
                } 
                currentImageUrl = imageArray[index]
                openModal = true
                ">
                {{#if enable_image_modal}}
                <div class="cm-customization-images-thumbnail-mask">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white" class="cm-customization-images-thumbnail-svg">
                    <path d="M9 6a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0v-1.5h-1.5a.75.75 0 0 1 0-1.5h1.5v-1.5A.75.75 0 0 1 9 6Z" />
                    <path fill-rule="evenodd" d="M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Zm7-5.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z" clip-rule="evenodd" />
                    </svg>
                </div>
                {{/if}}
                <img width="120" height="120" src="{{ item }}?x-oss-process=image/resize,s_{{times preview_image_width 2}}" />
            </div>
        {{/for}}
    </div>
    {{/if}}
    {{!-- preview image modal --}}
    {{#if enable_image_modal}}
        <div class="cm-customization-modal"
        x-show="openModal">
            <div class="cm-customization-splide" role="group" aria-label="{{ title }}"
            x-show="openModal"
            x-transition:enter="cm-customization-transition"
            x-transition:enter-start="cm-customization-modal-from"
            x-transition:enter-end="cm-customization-modal-to"
            x-transition:leave="cm-customization-transition"
            x-transition:leave-start="cm-customization-modal-to"
            x-transition:leave-end="cm-customization-modal-from">
            <div class="cm-customization-splide-frame">
                <img width="400" height="400" :src="currentImageUrl + '?x-oss-process=image/resize,l_960'">
                <div x-show="showSlideLeftButton" class="cm-customization-splide-button cm-customization-splide-left"
                @click="
                previewIndex -= 1
                currentImageUrl = imageArray[previewIndex]
                if (imageArray.length > 1) {
                    if (previewIndex > 0 && previewIndex < imageArray.length - 1) {
                    showSlideLeftButton = true
                    showSlideRightButton = true
                    } else if (previewIndex === 0) {
                    showSlideLeftButton = false
                    showSlideRightButton = true
                    } else if (previewIndex === imageArray.length - 1) {
                    showSlideLeftButton = true
                    showSlideRightButton = false
                    }
                } 
                ">
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                    <path fill-rule="evenodd" d="M14 8a.75.75 0 0 1-.75.75H4.56l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 1.06L4.56 7.25h8.69A.75.75 0 0 1 14 8Z" clip-rule="evenodd" />
                    </svg>
                </span>
                </div>
                <div x-show="showSlideRightButton" class="cm-customization-splide-button cm-customization-splide-right"
                @click="
                previewIndex += 1
                currentImageUrl = imageArray[previewIndex]
                if (imageArray.length > 1) {
                    if (previewIndex > 0 && previewIndex < imageArray.length - 1) {
                    showSlideLeftButton = true
                    showSlideRightButton = true
                    } else if (previewIndex === 0) {
                    showSlideLeftButton = false
                    showSlideRightButton = true
                    } else if (previewIndex === imageArray.length - 1) {
                    showSlideLeftButton = true
                    showSlideRightButton = false
                    }
                } 
                ">
                <span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                    <path fill-rule="evenodd" d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z" clip-rule="evenodd" />
                    </svg>
                </span>
                </div>
            </div>
            </div>
            <div class="cm-customization-modal-close" 
            x-show="openModal"
            x-transition:enter="cm-customization-transition"
            x-transition:enter-start="cm-customization-close-from"
            x-transition:enter-end="cm-customization-close-to"
            x-transition:leave="cm-customization-transition"
            x-transition:leave-start="cm-customization-close-to"
            x-transition:leave-end="cm-customization-close-from"
            @click="
                openModal = false
            ">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white">
                <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
            </svg>
            </div>
            <div class="cm-customization-modal-bg" 
            x-show="openModal"
            x-transition:enter="cm-customization-transition"
            x-transition:enter-start="cm-customization-bg-from"
            x-transition:enter-end="cm-customization-bg-to"
            x-transition:leave="cm-customization-transition"
            x-transition:leave-start="cm-customization-bg-to"
            x-transition:leave-end="cm-customization-bg-from"
            @click="
            openModal = false
            "><span></span></div>
        </div>
    {{/if}}
  </div>
</div>