<template>
  <div class="chat-users">
    <div class="chat-conversation p-3">
      <div
        data-simplebar
        style="max-height: 470px"
        id="containerElement"
        ref="current"
      >
        <ul class="list-unstyled">
          <li
            v-for="data of messagesData"
            :key="data.message"
            :class="{ right: `${data.userType}` === 'sender' }"
          >
            <div class="conversation-list">
              <b-dropdown variant="white" menu-class="dropdown-menu-end">
                <template v-slot:button-content>
                  <i class="bx bx-dots-vertical-rounded"></i>
                </template>
                <b-dropdown-item>Copy</b-dropdown-item>
                <b-dropdown-item>Save</b-dropdown-item>
                <b-dropdown-item>Forward</b-dropdown-item>
                <b-dropdown-item>Delete</b-dropdown-item>
              </b-dropdown>
              <div class="ctext-wrap">
                <div class="conversation-name">{{ data.name }}</div>
                <p>{{ data.message }}</p>
                <p class="chat-time mb-0">
                  <i class="bx bx-time-five align-middle me-1"></i>
                  {{ data.time }}
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="p-3 chat-input-section">
      <form @submit.prevent="formSubmit" class="row">
        <div class="col">
          <div class="position-relative">
            <input
              type="text"
              v-model="form.message"
              class="form-control chat-input rounded"
              placeholder="Enter Message..."
              :class="{
                'is-invalid': submitted && $v.form.message.$error,
              }"
            />
            <div
              v-if="submitted && $v.form.message.$error"
              class="invalid-feedback"
            >
              <span v-if="!$v.form.message.required"
                >This value is required.</span
              >
            </div>
          </div>
        </div>
        <div class="col-auto">
          <button
            type="submit"
            class="btn btn-primary btn-rounded chat-send w-md"
          >
            <span class="d-none d-sm-inline-block me-2">Send</span>
            <i class="mdi mdi-send"></i>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import { required } from 'vuelidate/lib/validators';
import { BDropdown,BDropdownItem } from 'bootstrap-vue-next'


export default {
  props: {
    task: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      form: {
        message: '',
      },
      submitted: false,
      messagesData: [
        {
          name: `${this.task.interaction_details.leadDetails.leadFirstName}  ${this.task.interaction_details.leadDetails.leadLastName}`,
          message: this.task.interaction_details.payload.message,
          time: moment(
            new Date(this.task.interaction_details.createdAt),
          ).fromNow(),
          userType: 'receiver',
        },
      ],
    };
  },
  validations: {
    form: {
      message: {
        required,
      },
    },
  },
  methods: {
    formSubmit(e) {
      this.submitted = true;
      // stop here if form is invalid
      // this.$v.$touch();
      // if (this.$v.$invalid) {
      //   return;
      // }
    },
  },
  components: {   
    BDropdown,BDropdownItem
  },

};
</script>