<template>
  <Form
    v-if="editQuestion.jumps.length > 0"
    ref="questionForm"
    :model="editQuestion"
    :label-colon="false"
  >
    <div class="rule">
      <div
        v-for="(item, index) in editQuestion.jumps"
        :key="index"
        class="rule-item"
      >
        <div class="left-container">
          <div class="choice-box">
            <div class="label">
              {{ t("survey_creator.question.jump.option_is") }}
            </div>
            <div class="content">
              <div class="select">
                <FormItem
                  :label-width="0"
                  :prop="'jumps.' + index + '.choiceId'"
                  :rules="{
                    required: true,
                    message: ' ',
                  }"
                >
                  <Select class="fix-width" v-model="item.choiceId">
                    <Option
                      v-for="choice in choices"
                      :value="choice.value"
                      :key="choice.value"
                      :disabled="disabledChoice(choice)"
                      >{{ choice.label }}</Option
                    >
                  </Select>
                </FormItem>
              </div>
            </div>
          </div>
          <div class="questions-box">
            <div class="label">
              {{ t("survey_creator.question.jump.jump_to") }}
            </div>
            <div class="content">
              <div class="select">
                <FormItem
                  :label-width="0"
                  :prop="'jumps.' + index + '.toQuestionId'"
                  :rules="{
                    required: true,
                    message: ' ',
                  }"
                >
                  <Select class="fix-width" v-model="item.toQuestionId">
                    <Option
                      v-for="question in toQuestions"
                      :value="question.id"
                      :key="question.id"
                      >{{
                        `${question.header.number}.${question.header.text[primaryLanguage]}`
                      }}</Option
                    >
                  </Select>
                </FormItem>
              </div>
              <div>
                {{ t("survey_creator.question.jump.otherwise_to_next") }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="right-container"
          v-show="showDeleteBtn"
          @click="deleteJumpItem(index)"
        >
          <img src="../../../images/deleted.svg" />
        </div>
      </div>
      <Row
        class="mt-small"
        :gutter="16"
        type="flex"
        justify="start"
        :wrap="false"
      >
        <div class="btn-container" @click="addSetting">
          <Tooltip
            placement="right"
            :disabled="showAddBtn"
            :content="t(`survey_creator.question.jump.no_option_to_setting`)"
          >
            <div class="icon">
              <Icon type="md-add" :color="showAddBtn ? '#1890FF' : '#C5C8CE'" />
            </div>
            <div class="label" :class="showAddBtn ? 'enabled' : 'disabled'">
              {{ t("survey_creator.question.jump.add_setting") }}
            </div>
          </Tooltip>
        </div>
      </Row>
    </div>
  </Form>

  <div v-else class="no-data">
    <img class="empty-icon" src="../../../images/empty.svg" />
    <p class="desc" style="margin-bottom: 16px">
      {{ t("survey_creator.question.jump.no_setting_tips") }}
    </p>
    <Button icon="md-add" type="primary" @click="addFirstSetting">{{
      t("survey_creator.question.jump.add_setting")
    }}</Button>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import _ from "lodash";
import {
  Form,
  FormItem,
  Row,
  Select,
  Option,
  Tooltip,
  Icon,
  Button,
} from "view-design";
import questionFormMixin from "../../../mixins/question-form-mixin";

export default Vue.extend({
  name: "jump-setting-form",
  components: {
    Form,
    FormItem,
    Row,
    Option,
    Select,
    Tooltip,
    Icon,
    Button,
  },
  mixins: [questionFormMixin],
  props: {
    toQuestions: {
      type: Array,
      required: true,
    },
  },
  computed: {
    choices() {
      return _.map(this.editQuestion.choices, (q) => {
        return {
          value: q.id,
          label: q.text[this.$rootComponent.primaryLanguage],
        };
      });
    },
    questionChoicesIds() {
      return _.map(this.editQuestion.choices, (choice) => choice.id);
    },
    hasSettingChoicesIds() {
      return _.map(this.editQuestion.jumps, (jump) => jump.choiceId);
    },
    showAddBtn() {
      return !_.isEmpty(
        _.filter(
          this.questionChoicesIds,
          (choiceId) => !_.includes(this.hasSettingChoicesIds, choiceId)
        )
      );
    },
    showDeleteBtn() {
      return _.size(this.editQuestion.jumps) > 1;
    },
    firstEnabledChoiceId() {
      // @ts-ignore
      return _.find(
        this.choices,
        (choice) => !_.includes(this.hasSettingChoicesIds, choice.value)
      ).value;
    },
  },
  methods: {
    addSetting() {
      if (!this.showAddBtn) {
        return;
      }
      this.editQuestion.jumps.push({
        choiceId: this.firstEnabledChoiceId,
        toQuestionId: null,
      });
    },
    disabledChoice(item) {
      return _.includes(this.hasSettingChoicesIds, item.value);
    },
    deleteJumpItem(index) {
      this.editQuestion.jumps.splice(index, 1);
    },
    addFirstSetting() {
      this.editQuestion.jumps = [
        {
          choiceId: this.firstEnabledChoiceId,
          toQuestionId: null,
        },
      ];
    },
  },
});
</script>

<style scoped lang="less">
/deep/ .ivu-table-cell-slot .ivu-form-item {
  margin-bottom: 4px;
  margin-top: 0;
}

/deep/ .ivu-table-cell-slot .ivu-form-item-error {
  margin-bottom: 24px;
  margin-top: 0;
}

/deep/ .ivu-form-item {
  width: 100%;
}

.rule {
  .warning-color {
    color: #ed4014;
  }

  .warning-info {
    color: #ed4014;
    font-size: 13px;
  }
  .rule-item:hover {
    background-color: #f7f7f7;
    border-radius: 4px;
  }
  .rule-item {
    border: 1px solid #dcdee2;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 8px;
    display: flex;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    align-items: center;
    color: #262833;

    .left-container {
      width: 90%;

      .choice-box {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .questions-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-top: 10px;
      }

      .label {
        width: 20%;
        text-align: right;
        padding-right: 8px;
      }

      .content {
        width: 80%;
        display: flex;
        flex-direction: row;
        align-items: center;
        .select {
          margin-right: 8px;
          width: 50%;
          .ivu-form-item {
            margin-bottom: unset;
          }
        }
      }
    }

    .right-container {
      width: 10%;
      text-align: right;
      padding-right: 16px;
    }
  }
}

.btn-container {
  padding-left: 8px;
  .icon {
    display: flex;
    float: left;
    font-size: 18px;
  }

  .label {
    display: flex;
    float: left;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
  }

  .disabled {
    color: #c5c8ce;
  }
  .enabled {
    color: #1890ff;
    cursor: pointer;
  }
}

.no-data {
  margin-top: 10%;
  display: block;
  text-align: center;
  .desc {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #70748c;
  }
}
</style>
