<template>
  <div :class="config.classText.join(' ')">
    <div class="chat-container" >
      <div class="chat-messages">
        <!-- Messages -->
        <div v-for="(message, index) in messages" :key="index"
             :class="['message-wrapper', message.sender === 'user' ? 'user-message' : 'agent-message']">
          <div class="avatar">
            <img :src="message.sender === 'user' ? userAvatar : getAgentAvatar" alt="Avatar" />
          </div>
          <div class="message-content">
            <div v-if="message.text" class="message-text" v-html="message.text"></div>
            <!-- Options buttons -->
            <div v-if="message.options && message.options.length > 0" class="options-container">
              <button
                v-for="(option, optIndex) in message.options"
                :key="optIndex"
                :style="{color: config.style.btnTextColor,backgroundColor: config.style.buttonColor}"
                class="option-button"
                :class="{ 'selected': isOptionSelected(message.id, option) }">
                {{ option.text }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import agentAvatar from '@/assets/images/customer.png'
import userAvatar from '@/assets/images/profile.png'

export default {
  name: "h5-chat",
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          style: {}
        }
      }
    }
  },
  created() {
  },
  data() {
    return {
      messages: this.config.messages,
      userInput: "",
      userAvatar: userAvatar, // Placeholder for user avatar
      agentAvatar: agentAvatar, // Placeholder for agent avatar
      selectedOptions: {}
    };
  },
  watch: {
    config: {
      handler(newVal) {
        this.messages = newVal.messages;
      },
      deep: true
    }
  },
  computed: {
    getAgentAvatar() {
      if (this.config.style.avatar) {
        return this.config.style.avatar;
      }
      return this.agentAvatar;
    }
  },
  methods: {

    isOptionSelected(messageId, option) {
      const message = this.messages.find(m => m.id === messageId);
      return message && message.userSelection && message.userSelection.id === option.id;
    }
  }
};
</script>
<style src="./css/base.css"></style>
<style lang="scss" scoped>
p {
  white-space: pre-line;
}

.active {
  border-color: #02ff9b;
}
.chat-container {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  font-family: Arial, sans-serif;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.message-wrapper {
  display: flex;
  margin-bottom: 16px;
  max-width: 80%;
}

.agent-message {
  align-self: flex-start;
}

.user-message {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.avatar {
  font-size: 14px;
  display: flex;
  padding-right: 5px;
  padding-left: 0;
  margin-bottom: 15px;
}

.avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.message-content {
  display: flex;
  flex-direction: column;
}

.message-text {
  padding: 12px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

.agent-message .message-text {
  background-color: white;
  color: #333;
  border-top-left-radius: 4px;
}

.user-message .message-text {
  background-color: #4a90e2;
  color: white;
  border-top-right-radius: 4px;
}

.options-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.option-button {
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 18px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.option-button:hover {
  background-color: #3a80d2;
}

.option-button.selected {
  background-color: #2a70c2;
}

.input-area {
  display: flex;
  padding: 12px;
  border-top: 1px solid #e0e0e0;
  background-color: white;
}

.message-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  margin-right: 8px;
  font-size: 14px;
}

.send-button {
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0 16px;
  font-size: 14px;
  cursor: pointer;
}

.send-button:hover {
  background-color: #3a80d2;
}

/* For user selections displayed in chat */
.user-message .message-content {
  align-items: flex-end;
}

.user-selection {
  background-color: #e6f3ff;
  color: #4a90e2;
  padding: 8px 16px;
  border-radius: 18px;
  font-size: 14px;
  margin-top: 4px;
}
</style>
