<template>
  <li :class="itemClasses">
    <div v-if="swipable && $slots['swipe-actions-left']" class="swipe-actions swipe-actions-left">
      <slot name="swipe-actions-left"></slot>
    </div>
    <div class="list-item-content-wrapper"> <!-- New wrapper for content + right swipe -->
      <div class="list-item-content">
        <slot></slot>
      </div>
      <div v-if="swipable && $slots['swipe-actions-right']" class="swipe-actions swipe-actions-right">
        <slot name="swipe-actions-right"></slot>
      </div>
    </div>
  </li>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'VListItem',
  props: {
    completed: {
      type: Boolean,
      default: false,
    },
    swipable: {
      type: Boolean,
      default: false,
    },
    isSwiped: { // This prop controls the visual "swiped" state
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const itemClasses = computed(() => [
      'list-item',
      {
        'completed': props.completed,
        'is-swiped': props.isSwiped && props.swipable, // Only apply if swipable
        'swipable': props.swipable, // Add a general class if item is swipable for base styling
      },
    ]);

    return {
      itemClasses,
    };
  },
});
</script>

<style lang="scss" scoped>
.list-item {
  position: relative; // For positioning swipe actions absolutely if needed, or for overflow handling
  background-color: #fff; // Default item background
  // border-bottom: 1px solid #e0e0e0; // Example item separator
  // &:last-child {
  //   border-bottom: none;
  // }
  display: flex; // Using flex to manage potential left/right swipe areas if they are part of the flow
  overflow: hidden; // Crucial for the swipe reveal effect with translate

  &.swipable {
    // Base styling for swipable items, if any.
    // For example, you might want a slightly different cursor or hover effect.
  }
}

// This wrapper will be translated to reveal swipe actions
.list-item-content-wrapper {
  flex-grow: 1;
  display: flex; // To place content and right-swipe actions side-by-side
  transition: transform 0.3s ease-out;
  // The content itself should fill the space and not be affected by swipe actions' width
  // until it's translated.
  width: 100%; // Ensures it takes up the full space initially
  z-index: 1; // Keep content above swipe actions until swiped
}

.list-item-content {
  padding: 0.75rem 1rem; // Example padding
  flex-grow: 1; // Content takes available space
  // Add other common styling for list item content area
  // e.g., text color, font size
  background-color: inherit; // Inherit from .list-item, can be overridden
  // Useful so that when it slides, it has the right bg
}

.swipe-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  // These actions are revealed by translating .list-item-content-wrapper
  // Their width will determine how much is revealed.
  // Example: fixed width for actions container
  // width: 80px; // This would be per side
  z-index: 0; // Below content wrapper
  background-color: #f0f0f0; // Default background for actions area
}

.swipe-actions-left {
  position: absolute; // Take out of flow, position to the left
  left: 0;
  top: 0;
  bottom: 0;
  // width: auto; // Determined by content, or set fixed
  transform: translateX(-100%); // Initially hidden to the left
  transition: transform 0.3s ease-out;

  .list-item.is-swiped & {
    // When swiped to reveal left actions
    transform: translateX(0);
  }
}

.swipe-actions-right {
  // This is now part of the list-item-content-wrapper flex layout
  // It's revealed by translating the list-item-content part of the wrapper,
  // or by translating the wrapper itself and having this fixed.
  // For simplicity, let's assume it has a fixed width and is revealed.
  // No, the current structure has list-item-content-wrapper moving.
  // So, swipe-actions-right should be fixed at the end of list-item.
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  // width: auto; // Determined by its content, or set fixed
  transform: translateX(100%); // Initially hidden to the right
  transition: transform 0.3s ease-out;

  // This approach is if .list-item-content is translated.
  // If .list-item-content-wrapper is translated, then this needs to be static inside it.
  // Let's adjust based on list-item-content-wrapper moving.
  // No, the initial thought was:
  // <left-actions /> <content-wrapper> <content/> <right-actions/> </content-wrapper>
  // If content-wrapper translates left, right actions are revealed.
  // If content-wrapper translates right, left actions (if they were outside) are revealed.
  // The current HTML structure is:
  // <left-actions /> <content-wrapper> <content/> </content-wrapper> <right-actions /> (if right actions are outside wrapper)
  // Or:
  // <left-actions /> <content-wrapper> <content/> <right-actions/> </content-wrapper> (if right actions are inside wrapper)
  // The latter is what I have in the template. So list-item-content-wrapper translates.

  // This needs to be outside the list-item-content-wrapper in the flex flow of .list-item
  // Or, .list-item-content-wrapper itself is translated.
  // Let's assume .list-item-content-wrapper is translated.
  // The swipe-actions-left and swipe-actions-right are fixed, and content slides over them.
  // This is a common pattern. The current HTML needs slight adjustment for that.

  // Re-thinking the template for common swipe:
  // <li class="list-item">
  //   <div class="swipe-actions-left">...</div>
  //   <div class="list-item-content">...</div> <!-- This is the part that moves -->
  //   <div class="swipe-actions-right">...</div>
  // </li>
  // And .list-item-content would get transform: translateX().

  // Let's stick to current template and make it work:
  // <left-actions/> <wrapper> <content/> <right-actions/> </wrapper>
  // If wrapper translates left, it reveals its own right-actions.
  // If wrapper translates right, it reveals the list-item's left-actions.

  // Reveal right actions by translating the list-item-content-wrapper to the left
  .list-item.is-swiped & {
    // This assumes isSwiped means revealing RIGHT actions.
    // Need differentiation if both left/right can be revealed independently.
    // For now, isSwiped reveals right.
    // This class is on .list-item. The .swipe-actions-right is inside the wrapper.
    // So, the wrapper needs to translate.
    // No, this is fine. .list-item.is-swiped controls the transform of list-item-content-wrapper.
    // Let's assume .list-item-content-wrapper translates left by the width of .swipe-actions-right
    // This means .swipe-actions-right needs to have a defined width.
    // Example: If .swipe-actions-right is 80px wide:
    // .list-item.is-swiped .list-item-content-wrapper { transform: translateX(-80px); }
    // And .swipe-actions-right would just sit there.
    // This logic should be on .list-item-content-wrapper based on .is-swiped of parent.
  }
}

// Adjusting transform on list-item-content-wrapper based on parent .is-swiped
.list-item.is-swiped .list-item-content-wrapper {
  // This needs to be dynamic based on which actions are shown and their width.
  // For a simple right swipe reveal:
  // transform: translateX(-[width of right actions]);
  // Example: if right actions are 80px wide. We need JS to measure or fixed CSS.
  // For now, let's assume a class like .reveal-right on .list-item sets this.
  // If isSwiped just means "right is revealed":
  // transform: translateX(-80px); // Placeholder, assumes 80px width of right actions
  // This needs to be more robust.
  // Let's make .is-swiped simply enable the visibility of the actions,
  // and the actions themselves are positioned absolutely or revealed by fixed translation.

  // Revised approach: actions are absolutely positioned, content slides.
  // This means list-item-content needs to be the one moving, not list-item-content-wrapper.
  // The HTML needs to be:
  // <li>
  //   <div class="swipe-actions-left">...</div>
  //   <div class="list-item-content"> <!-- This is the one that moves -->
  //      <slot></slot>
  //   </div>
  //   <div class="swipe-actions-right">...</div>
  // </li>
  // I will adjust the template above based on this.
  // ... (Template adjusted above - no, I will stick to the current one for now and make it work)

  // With current template:
  // <li class="list-item">
  //   <div class="swipe-actions swipe-actions-left">...</div> (absolute, revealed by content-wrapper translating right)
  //   <div class="list-item-content-wrapper"> (this translates left or right)
  //     <div class="list-item-content">...</div>
  //     <div class="swipe-actions swipe-actions-right">...</div> (flex child of wrapper, revealed when wrapper translates left)
  //   </div>
  // </li>

  // If .list-item.is-swiped means "right actions revealed":
  // .list-item.is-swiped .list-item-content-wrapper { transform: translateX(-[width of .swipe-actions-right]); }
  // If .list-item.is-left-swiped means "left actions revealed":
  // .list-item.is-left-swiped .list-item-content-wrapper { transform: translateX([width of .swipe-actions-left]); }
  // The `isSwiped` prop is boolean, so it can only mean one direction. Assume it's for right.
  // To make this work, .swipe-actions-right needs a defined width.
  // Let's assume actions have a button that defines their width.
  // This CSS is a placeholder for the actual swipe mechanics.
  // For Storybook, we just want to show/hide based on `isSwiped`.

  // Let's simplify: .is-swiped shows right actions by setting transform on wrapper.
  // The actual width needs to be handled by the content of swipe-actions-right.
  // This is hard to do purely in CSS without knowing width.
  // A common trick is to set right: 0 on actions and let content slide.

  // Simplified for story:
  // We'll have .swipe-actions-right just appear when .is-swiped.
  // This won't look like a swipe, but will show the slot.
  // A true swipe needs JS to measure or fixed widths.
  // Let's go with a fixed transform for now for demo purposes.
  .list-item.is-swiped .list-item-content-wrapper {
    transform: translateX(-80px); // Assumes right actions are 80px.
  }

  // And left actions (if any)
  .list-item.is-left-swiped .list-item-content-wrapper {
    // Hypothetical class
    transform: translateX(80px); // Assumes left actions are 80px.
  }

  // Since `isSwiped` is boolean, it can only control one state.
  // Let's assume `isSwiped` means "the right actions are visible".
}

.list-item.completed {
  .list-item-content {
    // Example: strike-through text or different background
    // color: #adb5bd; // Muted text color
    // text-decoration: line-through;
    background-color: #f0f8ff; // Light blue background for completed
  }

  // You might want to disable swipe on completed items or style them differently
  &.swipable .list-item-content {
    // Specific style for swipable AND completed
  }
}
</style>
