<h3>{{ customTitle ? customTitle : labels.Title }}</h3>
<el-form
  ref="form"
  :model="FormData"
  class="WorkflowDesignerWindowForm"
  label-position="top"
  label-width="150px">

  <div v-if="Field.State != undefined" class="SettingsWithPadding">
    <div class="el-form--inline el-form--label-top">
      <el-form-item
        :label="customLabels.Name"
        prop="Name"
        :rules="getFieldRules(Field.Name)"
        class="el-form-item"
        style="flex-grow: 1;">
        <el-input v-model="FormData.Name" :readonly="readonly"></el-input>
      </el-form-item>

      <el-form-item
        :label="customLabels.State"
        prop="State"
        :rules="getFieldRules(Field.State)"
        class="el-form-item"
        style="flex-grow: 1;">
        <el-input v-model="FormData.State" :readonly="readonly"></el-input>
      </el-form-item>
    </div>
  </div>

  <h4 v-if="Field.State != undefined" style="padding-bottom: 1px;border-bottom: 1px solid rgba(34,36,38,.15);">
    {{ customLabels.Heading }}</h4>
  <div :class="Field.State != undefined ?'SettingsWithPadding' : '' " style="margin-bottom: 10px;">

    <div class="el-form--inline el-form--label-top" style="width: 100%">
      <el-form-item
        v-if="Field.MailServer"
        :label="customLabels.MailServer"
        prop="MailServer"
        :rules="getFieldRules(Field.MailServer)"
        class="el-form-item"
        style="flex-grow: 1;">
        <el-input v-model="FormData.MailServer" :readonly="readonly"></el-input>
      </el-form-item>

      <el-form-item
        v-if="Field.MailServerPort"
        prop="MailServerPort"
        :rules="getFieldRules(Field.MailServerPort)"
        class="el-form-item"
        style="flex-grow: 1;">
          <template #label>{{ customLabels.MailServerPort }}
            <span
              :style="parameterFromProcess.MailServerPort ? {color:parameterFromProcessColor}: {}"
              class="WorkflowDesignerParameterFromProcess"
              @click="togglePort">@
            </span>
          </template>
        <el-input v-if="!parameterFromProcess.MailServerPort" v-model="FormData.MailServerPort" :disabled="readonly"
                  type="number"></el-input>
        <el-input v-if="parameterFromProcess.MailServerPort" v-model="FormData.MailServerPort" :disabled="readonly"
                  style="width:180px"></el-input>
      </el-form-item>
    </div>

    <div class="el-form--inline el-form--label-top">
      <el-form-item
        v-if="Field.MailServerFrom"
        :label="customLabels.MailServerFrom"
        prop="MailServerFrom"
        :rules="getFieldRules(Field.MailServerFrom)"
        class="el-form-item"
        style="flex-grow: 1;">
        <el-input v-model="FormData.MailServerFrom" :readonly="readonly"></el-input>
      </el-form-item>
      <el-form-item
        :label="customLabels.To"
        prop="To"
        :rules="getFieldRules(Field.To)"
        class="el-form-item"
        style="flex-grow: 1;">
        <el-input v-model="FormData.To" :readonly="readonly"></el-input>
      </el-form-item>
    </div>

    <div class="el-form--inline el-form--label-top">
      <el-form-item
        :label="customLabels.CcList"
        prop="CcList"
        :rules="getFieldRules(Field.CcList)"
        class="el-form-item"
        style="flex-grow: 1;">
        <el-select
          v-model="FormData.CcList"
          :readonly="readonly"
          allow-create
          filterable
          multiple
          :reserve-keyword="false"
          style="width: 100%">
        </el-select>
      </el-form-item>
      <el-form-item
        :label="customLabels.BccList"
        prop="BccList"
        :rules="getFieldRules(Field.BccList)"
        class="el-form-item"
        style="flex-grow: 1;">
        <el-select
          v-model="FormData.BccList"
          :readonly="readonly"
          allow-create
          filterable
          :reserve-keyword="false"
          multiple
          style="width: 100%">
        </el-select>
      </el-form-item>
    </div>

    <el-form-item
      :label="customLabels.ReplyToList"
      prop="ReplyToList"
      :rules="getFieldRules(Field.ReplyToList)"
      class="el-form-item"
      style="flex-grow: 1;">
      <el-select
        v-model="FormData.ReplyToList"
        :readonly="readonly"
        allow-create
        filterable
        :reserve-keyword="false"
        multiple>
      </el-select>
    </el-form-item>

    <el-form-item
      :label="customLabels.Subject"
      prop="Subject"
      :rules="getFieldRules(Field.Subject)">
      <el-input v-model="FormData.Subject" :readonly="readonly"></el-input>
    </el-form-item>


    <div class="el-form--inline el-form--label-top">
      <el-form-item
        v-if="Field.MailServerSsl"
        prop="MailServerSsl"
        :rules="getFieldRules(Field.MailServerSsl)">
          <template #label>{{ customLabels.MailServerSsl }}
            <span
              :style="parameterFromProcess.MailServerSsl ? {color:parameterFromProcessColor}: {}"
              class="WorkflowDesignerParameterFromProcess"
              @click="toggleSSL">@
            </span>
          </template>
        <el-checkbox
          v-if="!parameterFromProcess.MailServerSsl"
          v-model="FormData.MailServerSsl"
          :disabled="readonly"
          style="width:180px">
        </el-checkbox>
        <el-input v-if="parameterFromProcess.MailServerSsl" v-model="FormData.MailServerSsl" :disabled="readonly"
                  style="width:180px"></el-input>
      </el-form-item>
      <el-form-item
        prop="IsHTML"
        :rules="getFieldRules(Field.IsHTML)">
          <template #label>{{ customLabels.IsHTML }}
            <span
              :style="parameterFromProcess.IsHTML ? {color:parameterFromProcessColor}: {}"
              class="WorkflowDesignerParameterFromProcess"
              @click="toggleHTML">@
            </span>
          </template>
        <el-checkbox
          v-if="!parameterFromProcess.IsHTML"
          v-model="FormData.IsHTML"
          :disabled="readonly"
          style="width:180px">
        </el-checkbox>
        <el-input v-if="parameterFromProcess.IsHTML" v-model="FormData.IsHTML" :disabled="readonly" style="width:180px"></el-input>
      </el-form-item>
      <el-form-item
        v-if="Field.MailServerLogin || Field.MailServerPass"
        :label="customLabels.UseAuth">
        <el-checkbox
          v-model="useAuth"
          :disabled="readonly">
        </el-checkbox>
      </el-form-item>
    </div>

    <div v-if="useAuth" class="el-form--inline el-form--label-top">
      <el-form-item
        v-if="Field.MailServerLogin"
        :label="customLabels.MailServerLogin"
        prop="MailServerLogin"
        :rules="getFieldRules(Field.MailServerLogin)"
        class="el-form-item"
        style="flex-grow: 1;">
        <el-input v-model="FormData.MailServerLogin" :readonly="readonly"></el-input>
      </el-form-item>
      <el-form-item
        v-if="Field.MailServerPass"
        :label="customLabels.MailServerPass"
        prop="MailServerPass"
        :rules="getFieldRules(Field.MailServerPass)"
        class="el-form-item"
        style="flex-grow: 1;">
        <el-input v-model="FormData.MailServerPass" :readonly="readonly"></el-input>
      </el-form-item>
    </div>

    <el-form-item
      :label="customLabels.Body"
      prop="Body"
      :rules="getFieldRules(Field.Body)">
      <el-input v-model="FormData.Body" :readonly="readonly" :rows="5" type="textarea"></el-input>
    </el-form-item>

  </div>

</el-form>


<div class="WorkflowDesignerButtons">
  <el-button v-if="!readonly" type="primary" @click="onSave">{{ ButtonTextSave }}</el-button>
  <el-button @click="onClose">{{ ButtonTextCancel }}</el-button>
</div>

<script type="application/javascript">
  function customforms_basicsplugin_sendemailform_Data(me) {
    return {
      customTitle: undefined,
      readonly: false,
      parameterFromProcess: {
        MailServerPort: false,
        MailServerSsl: false,
        IsHTML: false
      },
      FormData: {},
      Field: {
        Name: {
          Name: '',
          Title: '',
          Comment: '',
          Type: '',
          IsRequired: '',
          DefaultValue: null
        },
        State: { /* Same structure as Name field */},
        MailServer: { /* Same structure as Name field */},
        MailServerPort: { /* Same structure as Name field */},
        MailServerFrom: { /* Same structure as Name field */},
        To: { /* Same structure as Name field */},
        CcList: { /* Same structure as Name field */},
        BccList: { /* Same structure as Name field */},
        ReplyToList: { /* Same structure as Name field */},
        Subject: { /* Same structure as Name field */},
        MailServerSsl: { /* Same structure as Name field */},
        IsHTML: { /* Same structure as Name field */},
        MailServerLogin: { /* Same structure as Name field */},
        MailServerPass: { /* Same structure as Name field */},
        Body: { /* Same structure as Name field */}
      },
      useAuth: false
    }
  }

  function customforms_basicsplugin_sendemailform_Init(me) {
    const {VueConfig} = me;
    const {state: data, methods} = VueConfig;

    methods.UpdateLanguage = function () {
      Object.assign(data, {
        labels: WorkflowDesignerConstants.EditParametersFormlabel,
        customLabels: WorkflowDesignerConstants.EditParametersFormlabel.CustomForms.SendEmail,
        ButtonTextSave: WorkflowDesignerConstants.ButtonTextSave,
        ButtonTextCancel: WorkflowDesignerConstants.ButtonTextCancel,
        parameterFromProcessColor: WorkflowDesignerConstants.ParameterFromProcessColor,
      })
    }

    methods.UpdateLanguage();

    methods.onUpdate = function (value) {
      data.readonly = me.graph.Settings.readonly;

      if (me.options && me.options.customTitle) {
        data.customTitle = me.options.customTitle;
      }

      var fields = undefined;
      var parameterDefinition = me.options.parameterDefinition;

      if (parameterDefinition && parameterDefinition.name) {
        for (var i = 0; i < parameterDefinition.type.length; i++) {
          fields = me.graph.getActionParameterDefinition(parameterDefinition.name, parameterDefinition.type[i]);
          if (fields && fields.length > 0)
            break;
        }
      } else if (Array.isArray(me.options.parameterDefinition)) {
        fields = me.options.parameterDefinition;
      }

      if (fields && fields.length > 0) {
        fields.forEach(function (field) {
          field.Label = field.Title ? field.Title : field.Name;
          if (field.Comment && field.Comment !== '') {
            field.Label = field.Label + ' (' + field.Comment + ')';
          }

          data.Field[field.Name] = field;
        });

        if (!value && !data.readonly) {
          var tmp = {};

          fields.forEach(function (field) {
            if (field.Type === 'Checkbox') {
              field.DefaultValue = field.DefaultValue !== null && field.DefaultValue !== undefined && field.DefaultValue.toString() === 'true';
            }

            if (typeof field.DefaultValue != 'undefined') {
              tmp[field.Name] = field.DefaultValue;
            } else {
              tmp[field.Name] = null;
            }
          });

          value = WorkflowDesignerCommon.toString(tmp);
        }
      }

      data.FormData = WorkflowDesignerCommon.toJSON(value);

      if (!data.FormData)
        data.FormData = {};

      for (const key in data.FormData) {
        if (typeof data.parameterFromProcess[key] !== 'undefined' && WorkflowDesignerCommon.containsAt(data.FormData[key]))
          data.parameterFromProcess[key] = true;
        if (key !== '__customtype' && data.FormData.hasOwnProperty(key))
          if (!data.Field.hasOwnProperty(key))
            delete data.FormData[key];
      }

      data.FormData.CcList = WorkflowDesignerCommon.toJSON(data.FormData.CcList, []);
      data.FormData.BccList = WorkflowDesignerCommon.toJSON(data.FormData.BccList, []);
      data.FormData.ReplyToList = WorkflowDesignerCommon.toJSON(data.FormData.ReplyToList, []);

      data.FormData = me.graph.insertDefaultValuesInForm(data.Field, data.FormData)

      data.useAuth = data.FormData.MailServerPass != null || data.FormData.MailServerLogin != null
    };

    methods.getFieldRules = function (field) {
      var rules = field.IsRequired ? me.requiredRule() : [{required: false}];

      if (data.parameterFromProcess[field.Name]) {
        rules.push(WorkflowDesignerCommon.containsAtRule);
      }

      return rules;
    };

    methods.onSave = function () {
      this.$refs.form.validate(function (valid) {
        if (valid) {
          if (!data.useAuth) {
            data.FormData.MailServerLogin = null;
            data.FormData.MailServerPass = null;
          }

          const {FormData} = data;

          FormData.CcList = WorkflowDesignerCommon.toString(FormData.CcList);
          FormData.BccList = WorkflowDesignerCommon.toString(FormData.BccList);
          FormData.ReplyToList = WorkflowDesignerCommon.toString(FormData.ReplyToList);

          var value = WorkflowDesignerCommon.toString(FormData);
          me.onSuccess(WorkflowDesignerCommon.toCompactJSON(value));
          me.onClose(true);
        }
      });
    };

    methods.onClose = function () {
      me.onClose(true);
    };

    methods.togglePort = function () {
      data.FormData.MailServerPort = null;
      data.parameterFromProcess.MailServerPort = !data.parameterFromProcess.MailServerPort;
    }

    methods.toggleSSL = function () {
      data.FormData.MailServerSsl = data.parameterFromProcess.MailServerSsl ? false : null;
      data.parameterFromProcess.MailServerSsl = !data.parameterFromProcess.MailServerSsl;
    }

    methods.toggleHTML = function () {
      data.FormData.IsHTML = data.parameterFromProcess.IsHTML ? false : null;
      data.parameterFromProcess.IsHTML = !data.parameterFromProcess.IsHTML;
    }
  }
</script>
