<template>
  <div class="height-set workflow-edit-modal">
    <div class="spinner-main">
      <Loader :loading="widgetLoading"> </Loader>
    </div>
    <div class="row d-flex justify-content-between" v-if="!widgetLoading">
      <h4 class="mb-3">{{ AddUser ? "Add" : "Update" }} Workflow</h4>
      <b-form @submit.prevent="formSubmit">
        <div class="row">
          <div class="col-md-9">
            <div class="card">
              <div class="card-body">
                <div class="row">
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Give your workflow a name:"
                      label-for="formrow-sourcename-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-input
                        id="formrow-sourcename-input"
                        type="text"
                        placeholder="Name"
                        v-model="form.name"
                        name="widgetname"
                        :class="{
                          'is-invalid': submitted && v$.form.name.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && v$.form.name.$error"
                        class="invalid-feedback"
                      >
                        <span>This value is required.</span>
                      </div>
                    </b-form-group>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-4">
                    <b-form-group
                      class="mb-3"
                      label="Give your workflow a description:"
                      label-for="formrow-Description-input"
                      label-class="font-weight-normal"
                    >
                      <b-form-input
                        id="formrow-Description-input"
                        type="text"
                        placeholder="Description"
                        v-model="form.description"
                        name="description"
                        :class="{
                          'is-invalid': submitted && v$.form.description.$error,
                        }"
                      ></b-form-input>
                      <div
                        v-if="submitted && v$.form.description.$error"
                        class="invalid-feedback"
                      >
                        <span>This value is required.</span>
                      </div>
                    </b-form-group>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-4">
                    <div class="form-check form-switch mb-3 form-switch-lg d-flex">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        id="isActive"
                        v-model="form.isActive"
                      />
                      <label class="form-check-label" for="isActive">Is Active</label>
                    </div>
                  </div>
                </div>

                <template v-if="selectedId === null">
                  <p class="font-weight-normal">What type of workflow is it?</p>
                  <workflow-types
                    :selectedID="form.selectedTypeID"
                    :types="workflowTypes"
                    @onSelectType="form.selectedTypeID = $event"
                  ></workflow-types>
                </template>
                <p class="font-weight-normal" v-if="selectedWorkflowType !== null">
                  Selected Workflow : {{ selectedWorkflowType.name }}
                </p>

                <template v-if="showWorkFlowExecutionSelect">
                  <p class="font-weight-normal">When should your workflow be executed?</p>
                  <div class="row mb-3">
                    <div class="col-md-6">
                      <multiselect
                        v-model="form.selectExecutionType"
                        :options="executionOptions"
                        :class="{
                          'is-invalid': submitted && v$.form.selectExecutionType.$error,
                        }"
                        placeholder="Select execution type"
                        label="label"
                        :multiple="false"
                      ></multiselect>

                      <div
                        v-if="submitted && v$.form.selectExecutionType.$error"
                        class="invalid-feedback"
                      >
                        <span>This value is required.</span>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <div class="card" v-if="showWorkFlowConditionsSelect">
              <workflow-conditions
                :selectedWorkflowDetails="selectedWorkflowDetails"
                :conditionOperator="conditionOperator"
                @conditionOperator="conditionOperator = $event"
                :selectedWorkflowType="selectedWorkflowType"
                @selectedConditions="selectedConditions = $event"
                :contactTags="contactTags"
                :sources="sources"
              ></workflow-conditions>
            </div>
            <div class="card" v-if="showWorkFlowActions">
              <work-flow-actions
                :selectedWorkflowDetails="selectedWorkflowDetails"
                @selectedActions="selectedActions = $event"
                :selectedWorkflowType="selectedWorkflowType"
                :agents="agents"
                :contactTags="contactTags"
                :emailTemplates="emailTemplates"
                @refetchEmailTemplates="getEmailTemplates()"
                @refetchTags="getContactTags()"
              ></work-flow-actions>
            </div>
            <div class="card">
              <div class="card-body">
                <div class="mb-3">
                  <b-button variant="primary" type="submit">
                    <i
                      v-if="addEditWorkflowLoading"
                      class="bx bx-loader bx-spin font-size-16 align-middle me-2"
                    ></i>
                    Save!</b-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </b-form>
    </div>
  </div>
</template>
<script>
import Multiselect from "vue-multiselect";
import Loader from "../../../components/Loader/loader.vue";
import { required } from "vuelidate/lib/validators";
import WorkflowTypes from "./WorkflowTypes.vue";
import WorkflowConditions from "./WorkflowConditions.vue";
import WorkFlowActions from "./WorkFlowActions.vue";
import MainService from "../../../service/mainService";
import WorkflowService from "../../../service/workflowService";
import EmailTemplateService from "../../../service/emailTemplatesService";
import SourceService from "../../../service/source";
import { BForm, BFormGroup, BFormInput, BButton } from "bootstrap-vue-next";
import { useVuelidate } from "@vuelidate/core";

import * as _ from "lodash";
export default {
  setup() {
    const v$ = useVuelidate({
      form: {
        name: { required },
        description: { required },
        selectExecutionType: { required },
      },
    });

    return { v$ }; // Ensure to return an object with the 'v$' property
  },
  props: {
    AddUser: {
      type: Boolean,
      required: true,
    },

    selectedId: {
      type: [Number, null],
      required: true,
    },

    addEditWorkflowLoading: {
      type: Boolean,
      required: true,
    },
    workflowTypes: {
      type: Array,
      required: true,
    },
    setErrorMessage: {
      type: Function,
      required: true,
    },
    setSuccessMessage: {
      type: Function,
      required: true,
    },
  },
  validations: {
    form: {
      name: { required },
      description: { required },
      selectExecutionType: { required },
    },
  },
  mounted() {
    console.log("editedItemsss", this.selectedId);
    this.getEmailTemplates();
    this.getAgents();
    this.getContactTags();
    this.getSources();
    // if (this.selectedId) {
    //   this.getWorkflowDetails(this.selectedId);
    // }
  },
  data() {
    return {
      conditionOperator: "AND",
      executionOptions: [
        {
          label: "When a new contact is created",
          value: 1,
        },
        {
          label: "When an existing contact is interacting",
          value: 2,
        },
      ],
      submitted: false,
      form: {
        name: "",
        description: "",
        selectExecutionType: null,
        selectedTypeID: null,
        isActive: true,
      },
      agents: [],
      emailTemplates: [],
      loadingAgents: false,
      loadingEmailTemplates: false,
      contactTags: [],
      loadingContactTags: false,
      loadingSources: false,
      selectedConditions: null,
      selectedActions: null,
      loadingWorkflowDetails: false,
      selectedWorkflowDetails: null,
      sources: [],
    };
  },
  computed: {
    workflowComputedDetail() {
      if (this.selectedWorkflowType === null) {
        return {
          error: [],
          data: {},
        };
      }
      const error = [];
      let data = {};
      if (this.selectedWorkflowType.name === "Contact") {
        let data = {
          name: this.form.name,
          description: this.form.description,
          isActive: this.form.isActive ? 1 : 0,
          type_id: this.selectedWorkflowType.sid,
          selectExecutionType:
            this.form.selectExecutionType !== null
              ? this.form.selectExecutionType.value
              : "",
          conditions: {
            type: this.conditionOperator,
            options: [],
          },
          actions: [],
        };
        if (this.selectedConditions == null || _.isEmpty(this.selectedConditions)) {
          error.push("No conditions is been selected.");
        } else {
          _.forEach(this.selectedConditions, (selectedCondition, index) => {
            let item = {
              type: null,
              operator: null,
              value: null,
            };
            if (selectedCondition.value === null) {
              error.push(`Condition type not selected for row ${index + 1}`);
            } else if (selectedCondition.selectedSelectoption === null) {
              error.push(
                `Condition type (${selectedCondition.value.label}) operator not selected `
              );
            } else if (selectedCondition.selectedvalueOption === null) {
              error.push(
                `Condition type (${selectedCondition.value.label}) value not selected `
              );
            }
            if (selectedCondition.value !== null) {
              item.type = selectedCondition.value.value;
            }
            if (selectedCondition.selectedSelectoption !== null) {
              item.operator = selectedCondition.selectedSelectoption.value;
            }
            if (selectedCondition.selectedvalueOption !== null) {
              if (selectedCondition.value.value === "CONTACT_STATUS_TAG") {
                item.tags = _.isArray(selectedCondition.selectedvalueOption)
                  ? selectedCondition.selectedvalueOption
                  : [];
              } else if (
                selectedCondition.selectedvalueOption.value &&
                _.isArray(selectedCondition.selectedvalueOption.value)
              ) {
                item.value = _.map(
                  selectedCondition.selectedvalueOption.value,
                  ({ value }) => value
                );
              } else if (
                selectedCondition.selectedvalueOption &&
                _.isArray(selectedCondition.selectedvalueOption)
              ) {
                item.value = _.map(
                  selectedCondition.selectedvalueOption,
                  ({ value }) => value
                );
              } else if (selectedCondition.selectedvalueOption.value) {
                item.value = selectedCondition.selectedvalueOption.value;
              } else {
                item.value = selectedCondition.selectedvalueOption;
              }
            }
            if (selectedCondition.value !== null) {
              data.conditions.options.push(item);
            }
          });
        }
        if (this.selectedActions == null || _.isEmpty(this.selectedActions)) {
          error.push("No actions is been selected.");
        } else {
          _.forEach(this.selectedActions, (selectedAction, index) => {
            let item = {
              type: null,
            };
            if (selectedAction.value === null) {
              error.push(`Action type not selected for row ${index + 1}`);
            } else if (_.isEmpty(selectedAction.selectedvalueOption)) {
              error.push(
                `Action type (${selectedAction.value.label}) value not selected `
              );
            }
            if (selectedAction.value !== null) {
              item.type = selectedAction.value.value;
            }
            switch (selectedAction.value.value) {
              case "SEND_EMAIL":
                item = {
                  ...item,
                  ...selectedAction.selectedvalueOption,
                };
                break;
              case "TAGS":
                item.tags = [];
                if (!_.isEmpty(selectedAction.selectedvalueOption)) {
                  item.tags = [...selectedAction.selectedvalueOption];
                }

                break;
              case "INTENT_SCORE":
                item.tags = [];
                if (!_.isEmpty(selectedAction.selectedvalueOption)) {
                  item.tags = _.map(
                    selectedAction.selectedvalueOption,
                    ({ value }) => value
                  );
                }
                break;
              case "AGENT":
                item = {
                  ...item,
                  routing: {},
                  agentIds: [], //admin users
                  teamIds: [], //team IDs
                };
                if (!_.isEmpty(selectedAction.selectedvalueOption)) {
                  item.agentIds = _.map(
                    _.filter(
                      selectedAction.selectedvalueOption,
                      ({ isAgent }) => isAgent === true
                    ),
                    ({ value }) => value
                  );
                  item.teamIds = _.map(
                    _.filter(
                      selectedAction.selectedvalueOption,
                      ({ isAgent }) => isAgent !== true
                    ),
                    ({ value }) => value
                  );
                }

                break;
            }
            if (selectedAction.value !== null) {
              data.actions.push(item);
            }
          });
        }
        return {
          data,
          error,
        };
      }
      return {
        error: [],
        data: {},
      };
    },
    widgetLoading() {
      return (
        this.loadingAgents ||
        // this.loadingContactTags ||
        this.loadingWorkflowDetails ||
        this.loadingSources
        // ||
        // this.loadingEmailTemplates
      );
    },
    selectedWorkflowType() {
      if (this.form.selectedTypeID === null) {
        return null;
      }
      const type = _.find(
        this.workflowTypes,
        ({ sid }) => sid === this.form.selectedTypeID
      );
      return type;
    },
    showWorkFlowExecutionSelect() {
      if (this.form.selectedTypeID === null) {
        return false;
      }
      if (this.workflowTypes.length === 0) {
        return false;
      }
      const type = _.find(
        this.workflowTypes,
        ({ sid }) => sid === this.form.selectedTypeID
      );
      if (_.includes(["Contact"], type.name)) {
        return true;
      }
      return false;
    },
    showWorkFlowConditionsSelect() {
      if (this.form.selectedTypeID === null) {
        return false;
      }
      if (this.workflowTypes.length === 0) {
        return false;
      }
      const type = _.find(
        this.workflowTypes,
        ({ sid }) => sid === this.form.selectedTypeID
      );
      if (_.includes(["Contact"], type.name)) {
        return true;
      }
      return false;
    },
    showWorkFlowActions() {
      if (this.form.selectedTypeID === null) {
        return false;
      }
      if (this.workflowTypes.length === 0) {
        return false;
      }
      const type = _.find(
        this.workflowTypes,
        ({ sid }) => sid === this.form.selectedTypeID
      );
      if (_.includes(["Contact"], type.name)) {
        return true;
      }
      return false;
    },
  },

  methods: {
    clearfield() {
      this.form.name = "";

      (this.form.description = ""),
        (this.form.selectExecutionType = null),
        (this.form.selectedTypeID = null),
        (this.form.isActive = true);
    },
    async getSources() {
      this.loadingSources = true;
      const {
        data: { data, message, success },
      } = await SourceService.getSources();
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.sources = _.map(data, ({ id: value, name: label }) => ({
          label,
          value,
        }));
      }
      this.loadingSources = false;
    },
    async getWorkflowDetails(id) {
      this.loadingWorkflowDetails = true;
      const {
        data: { data, message, success },
      } = await WorkflowService.getWorkflowById(id);
      // debugger;
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.form.name = data.name;
        this.form.description = data.description;
        this.form.selectExecutionType = _.find(
          this.executionOptions,
          ({ value }) => value === data.selectExecutionType
        );
        this.form.selectedTypeID = data.type_id;
        this.conditionOperator = data.conditions.type;
        this.selectedWorkflowDetails = data;
        // this.selectedConditions = [];

        // SET selected Actions
      }
      this.loadingWorkflowDetails = false;
    },
    async getContactTags() {
      this.loadingContactTags = true;
      const {
        data: { data, message, success },
      } = await WorkflowService.getContactTags();
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.contactTags = data;
      }
      this.loadingContactTags = false;
    },
    async getEmailTemplates() {
      //loadingEmailTemplates
      this.loadingEmailTemplates = true;
      const {
        data: { data, message, success },
      } = await EmailTemplateService.getEmailtemplates();
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.emailTemplates = _.isEmpty(data) ? [] : data;
      }
      this.loadingEmailTemplates = false;
    },
    async getAgents() {
      this.loadingAgents = true;
      const {
        data: { data, message, success },
      } = await MainService.getAgents();
      if (!success) {
        this.setErrorMessage(message);
      } else {
        this.agents = data;
      }
      this.loadingAgents = false;
    },
    formSubmit() {
      this.submitted = true;
      this.v$?.form.$touch();
      if (this.v$.$invalid) {
        return;
      }

      this.$emit("formSubmit", {
        ...this.workflowComputedDetail.data,
      });
    },
  },
  watch: {
    selectedId: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.getWorkflowDetails(newVal);
        }
      },
    },
    AddUser: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.clearfield();
        }
      },
    },
  },

  components: {
    Loader,
    WorkflowTypes,
    Multiselect,
    WorkflowConditions,
    WorkFlowActions,
    BForm,
    BFormGroup,
    BFormInput,
    BButton,
  },
};
</script>