<template>
  <div :class="parentWrapperClass" v-if="vshow">
    <blabel
      v-if="label && (type === 'normal' || type === 'switch-box')"
      :label="label"
      :disabled="vdisabled"
    ></blabel>

    <div :class="[type === 'switch-box' ? 'switch_box box_1' : '']">
      <!-- <label v-if="type === 'switch-box'">
        <span class="labelChk" :class="{disable_field: vdisabled}"  >
            <blabel :label="label" :disabled="vdisabled">{{ lLabel }}</blabel>
        </span>
      </label> -->

      <span
        v-if="type === 'switch-box'"
        :class="{ disable_field: vdisabled }"
        class="labelChk"
      >
        {{ trueLabel }}
      </span>

      <input
        :class="[
          type === 'switch'
            ? 'switch-input'
            : type === 'switch-box'
            ? 'switch_1'
            : 'normal-inputCheck',
        ]"
        :disabled="vdisabled"
        type="checkbox"
        :id="id"
        :name="id"
        class="form-control"
        v-bind="$attrs"
        :checked="shouldBeChecked"
        @change="updateInput"
      />

      <span
        v-if="type === 'switch-box'"
        :class="{ disable_field: vdisabled }"
        class="labelChk"
      >
        {{ falseLabel }}
      </span>

      <label
        v-if="type === 'switch'"
        :for="id"
        class="switch-label"
        :class="{ disable_field: vdisabled }"
      >
        <blabel v-if="label" :label="label" :disabled="vdisabled">
          {{ lLabel }}
        </blabel>
        <span class="toggle--on span1">{{ trueLabel }}</span>
        <span class="toggle--off span1">{{ falseLabel }}</span>
      </label>
    </div>
    <slot name="after:input"></slot>
  </div>
</template>
<script>
/* eslint-disable */
import Blabel from "./Blabel.vue";
import {
  isUndef,
  isPlainObject,
} from "@credenceanalytics/utilities";
export default {
  components: {
    Blabel,
  },
  model: {
    prop: "modelValue",
    event: "change",
  },
  props: {
    type: {
      type: String,
      default: "switch",
    },
    modelValue: {
      default: false,
    },
    parentWrapperClass: {
      type: String,
      default: "form-group",
    },
    trueLabel: {
      type: [String, Number],
      default: 1,
    },
    falseLabel: {
      type: [String, Number],
      default: 0,
    },
    trueValue: {
      type: [String, Number, Boolean],
      default: true,
    },
    falseValue: {
      type: [String, Number, Boolean],
      default: false,
    },
    id: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      default: "",
    },
    hide: {
      type: [String, Boolean, Object],
      default: true,
    },
    disabled: {
      type: [String, Boolean, Object],
      default: false,
    },
    errorMsg: {
      type: String,
      default: "",
    },
  },
  computed: {
    topTooltipOptions() {
      return {
        content: this.lLabel,
        placement: "top",
      };
    },
    lLabel() {
      return this.$t(this.label);
    },
    shouldBeChecked() {
      // for multi select checkbox
      if (this.modelValue instanceof Array) {
        return this.modelValue.includes(this.value);
      }
      // For single select check box
      return this.modelValue === this.trueValue;
    },
    vshow() {
      return isUndef(this.hide)
        ? true
        : isPlainObject(this.hide)
        ? this.hide[this.id]
        : this.hide;
    },
    vdisabled() {
      return isUndef(this.disabled)
        ? false
        : isPlainObject(this.disabled)
        ? this.disabled[this.id]
        : this.disabled;
    },
  },
  methods: {
    updateInput(event) {
      let isChecked = event.target.checked;
      if (this.modelValue instanceof Array) {
        // for multi select checkbox
        let newValue = [...this.modelValue];
        if (isChecked) {
          newValue.push(this.value);
        } else {
          newValue.splice(newValue.indexOf(this.value), 1);
        }
        this.$emit("change", newValue);
      } else {
        // For single select check box
        this.$emit("change", isChecked ? this.trueValue : this.falseValue);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.form-group input:disabled ~ .switch-label {
  cursor: not-allowed !important;
}
.custom-input input:disabled ~ .switch-label {
  cursor: not-allowed !important;
}
.labelChk {
  margin: 6px auto;
  color: #9677de;
}
.switch_box {
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.box_1 {
  background: none;
}
input[type="checkbox"].switch_1 {
  font-size: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 3.5em;
  height: 1.5em;
  background: #6fd4de7a;
  border-radius: 3em;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

input[type="checkbox"].switch_1:checked {
  background: lightseagreen;
}

input[type="checkbox"].switch_1:disabled {
  background: #ddd;
  cursor: not-allowed;
}
input[type="checkbox"].switch_1:disabled:checked {
  background: lightseagreen;
  cursor: not-allowed;
}
input[type="checkbox"].switch_1:after {
  position: absolute;
  content: "";
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
input[type="checkbox"].switch_1:checked:after {
  left: calc(100% - 1.5em);
}
</style>
