<template>
 <v-row>
   <v-col lg="3" md="4" sm="6">
     <va-text-input :label="$t('demo.text')" source="founder"></va-text-input>
   </v-col>
   <v-col lg="3" md="4" sm="6">
     <va-text-input :label="$t('demo.text')" source="headquarter"></va-text-input>
   </v-col>
 </v-row>
 <v-row>
   <v-col lg="3" md="4" sm="6">
     <va-text-input :label="$t('demo.text')" source="description" multiline></va-text-input>
   </v-col>
 </v-row>
</template>

<template>
 <v-row>
   <v-col lg="3" md="4" sm="6">
     <va-password-input label="Password" source="password"></va-password-input>
   </v-col>
 </v-row>
</template>

<template>
 <v-row>
   <v-col lg="3" md="4" sm="6">
      <va-number-input source="level" label="Level" :step="1" :min="0" :max="99"></va-number-input>
   </v-col>
 </v-row>
</template>

<template>
 <v-row>
   <v-col lg="3" md="4" sm="6">
      <va-date-input source="publishDate" label="Publish Date" format="shortFormat"></va-date-input>
   </v-col>
 </v-row>
</template>

<template>
 <v-row>
   <v-col lg="3" md="4" sm="6">
      <va-boolean-input source="active" label="Active"></va-boolean-input>
   </v-col>
 </v-row>
</template>

<template>
  <v-row>
    <v-col lg="3" md="4" sm="6">
      <va-rating-input source="rating" length="10" half-increments></va-rating-input>
    </v-col>
  </v-row>
</template>

<template>
  <v-row>
    <v-col lg="3" md="4" sm="6">
      <va-rich-text-editor
        :label="$t('demo.richtext')"
        source="richtext"
        v-model="model.richText"
        :active-buttons="[
          'bold',
          'italic',
          'strike',
          'underline',
          'code',
          'h1',
          'h2',
          'h3',
          'bulletList',
          'orderedList',
          'blockquote',
          'codeBlock',
          'horizontalRule',
          'undo',
          'redo',
        ]"
      >
      </va-rich-text-editor>
    </v-col>
  </v-row>
</template>

<template>
  <v-row>
    <v-col lg="3" md="4" sm="6">
      <va-tiny-mce-editor
        :options="{ min_height: 250 }"
        v-model="model.richText"
      >
      </va-tiny-mce-editor>
    </v-col>
  </v-row>
</template>

<template>
  <v-row>
    <v-col lg="3" md="4" sm="6">
      <va-select-input
        label="Select"
        clearable
        multiple
        reference="employeegrades"
        v-model="model.grades"
      >
      </va-select-input>
    </v-col>
  </v-row>
</template>

<template>
  <v-row>
    <v-col lg="3" md="4" sm="6">
      <va-radio-group-input
        clearable
        label="Currencies"
        v-model="model.radios"
        reference="currencies"
      >
      </va-radio-group-input>
    </v-col>
    <v-col lg="3" md="4" sm="6">
      <va-radio-group-input
        clearable
        inline
        label="Currencies"
        v-model="model.radios"
        reference="currencies"
      >
      </va-radio-group-input>
    </v-col>
  </v-row>
</template>

<template>
  <v-row>
    <v-col lg="3" md="4" sm="6">
      <va-auto-complete-input
        density="compact"
        source="userId"
        resource="employees"
        reference="employees"
        variant="outlined"
        multiple
      >
        <template v-slot:chip="{ props, item }">
          <v-chip v-if="item.raw.name"
            class="cursor-pointer"
            v-bind="props"
            :text="item.raw.name"
          >
           {{ item.raw.name }}
          </v-chip>
        </template>
      </va-auto-complete-input>
    </v-col>
  </v-row>
</template>

<template>
  <v-row no-gutters>
    <v-col sm="3" class="mr-3">
      <va-file-field 
        source="files" 
        :item="model" 
        action-type="download"
        table-name="employeeFiles"
      ></va-file-field>
    </v-col>
  </v-row>
  <v-row>
    <v-col lg="3" md="4" sm="6">
      <va-file-input
        source="files" 
        table-name="employeeFiles"
      ></va-file-input>
    </v-col>
  </v-row>
</template>

<template>
  <v-row no-gutters>
    <v-col lg="8" md="12" sm="12">
      <va-array-table-input
        source="employeeChildren"
        :title="$t('resources.employees.fields.employeeChildren')"
        primary-key="childId"
        :headers="headers"
        :fields="fields"
        :generate-uid="true"
      >
       <template v-slot:[`input.childName`]="{ field }">
         <va-text-input
           :key="field.source"
           v-model="employeeChildrenForm.childName"
           variant="outlined"
           :error-messages="childNameErrors"
           clearable
         >
         </va-text-input>
       </template>
       <template v-slot:[`input.childBirthdate`]="{ field }">
         <va-date-input
           :key="field.source"
           v-model="employeeChildrenForm.childBirthdate"
           variant="outlined"
           :error-messages="childBirthdateErrors"
         >
         </va-date-input>
       </template>
      </va-array-table-input>
    </v-col>
  </v-row>
</template>

<script>
import { useVuelidate } from "@vuelidate/core";
import { required, maxLength, numeric } from "@vuelidate/validators";
import Utils from "vuetify-admin/src/mixins/utils";
import Resource from "vuetify-admin/src/mixins/resource";
import { provide } from 'vue'

export default {
  props: ["id", "item"],
  mixins: [Utils, Resource],
  setup() {
    let vuelidate = useVuelidate();
    provide('v$', vuelidate)
    return { v$: vuelidate }
  },
  data() {
    return {
      model: {
        id: null,
        employeeChildren: null,
      },
      employeeChildrenHeaders: [
        { key: "childName", width: "40%" },
        { key: "childBirthdate", width: "40%" },
        { key: "actions" },
      ],
      employeeChildrenFields: [
        {
          source: "childName",
          type: "text",
        },
        {
          source: "childBirthdate",
          type: "date",
        },
      ]
    };
  },
  validations() {
    return {
      // model: {},
      employeeChildrenForm: {
        childName: {
          required,
        },
        childBirthdate: {
          required,
        }
      }
    }
  },
  created() {
    this.model.id = this.generateId(this);
  },
  computed: {
    employeeChildrenForm: {
      get() {
        return this.$store.getters[`${this.resource}/getRow`];
      },
      set(val) {
        this.$store.commit(`${this.resource}/setRow`, val);
      } 
    },
    childNameErrors() {
      const errors = [];
      const field = "childName";
      if (!this.v$["employeeChildrenForm"][field].$dirty) return errors;
      this.v$["employeeChildrenForm"][field].required.$invalid &&
        errors.push(this.$t("v.text.required"));
      return errors;
    },
    childBirthdateErrors() {
      const errors = [];
      const field = "childBirthdate";
      if (!this.v$["employeeChildrenForm"][field].$dirty) return errors;
      this.v$["employeeChildrenForm"][field].required.$invalid &&
        errors.push(this.$t("v.text.required"));
      return errors;
    },
  },
}
</script>

<template>
  <v-row no-gutters>
    <v-col sm="3" class="mr-3">
      <va-avatar-input
        source="avatarImage"
        :set-label="$t('resources.account.fields.avatar.set')"
        :del-label="$t('resources.account.fields.avatar.delete')"
      >
      </va-avatar-input>      
    </v-col>
  </v-row>
</template>

<template>
  <h2 class="h2 mb-4">
    {{ $t("menu.permissions") }}
  </h2>
  <v-row no-gutters>
    <v-col cols="6">
      <va-check-list-input
        source="rolePermissions"
        :headers="headers"
        :fields="fields"
        primary-key="permId"
        items-per-page="25"
        :group-header="$t('resources.roles.fields.moduleName')"
        group-by="moduleName"
        init-url="/permissions/findAll"
      >
      </va-check-list-input>    
    </v-col>
  </v-row>
</template>

<script>
import utils from "vuetify-admin/src/mixins/utils";
import { provide } from 'vue'

export default {
  props: ["id", "item"],
  mixins: [utils],
  setup() {
    let vuelidate = useVuelidate();
    provide('v$', vuelidate)
    return { v$: vuelidate }
  },
  data() {
    return {
      rolePermissions: [],
      model: {
        rolePermissions: null,
      },
      fields: [
        { source: "moduleName" },
        { source: "action" },
        { source: "route" },
        { source: "method"},
      ],
    };
  },
  computed: {
    headers() {
      return [
        {
          key: "moduleName",
          sortable: false,
        },
        {
          key: "action",
          sortable: false,
        },
        {
          key: "route",
          sortable: false,
        },
        {
          key: "method",
          sortable: false,
        },
      ];
    }
  }
}
</script>

<template>
  <v-row no-gutters>
    <v-col sm="3" class="mr-3">
      <va-color-picker-input
        source="themeColor"
        resource="account"
        dot-size="25"
        mode="hexa"
        show-swatches
        swatches-max-height="150"
        v-model="themeColor"
        :error-messages="themeColorErrors"
      ></va-color-picker-input>
    </v-col>
  </v-row>
</template>

<template>
  <v-row no-gutters>
    <v-col lg="3" md="4" sm="6">
      <va-select-input
        :label="$t('demo.currencyId')"
        reference="currencies"
        v-model="model.currencyId"
      >
      </va-select-input>
      <va-currency-input
        clearable
        :label="$t('demo.amount')"
        v-model="model.amount"
        :key="'amount_' + getCurrencyId"
        :options="{ currency: getCurrencyId, precision: 2 }"
      ></va-currency-input>
    </v-col>
  </v-row>
</template>

<script>
export default {
  data() {
    return {
      model: {
        amount: 0,
        currencyId: { id: "USD", name: "Usd" },
      },
    };
  },
  computed: {
    getCurrencyId() {
      if (this.model && this.model.currencyId && this.model.currencyId.id) {
        return this.model.currencyId.id;
      }
      return "TRY";
    },
  }
};
</script>

<template>
   <va-list 
      disable-create
      :filters="filters"
      :fields="fields"
      :items-per-page="50"
   >
      <va-data-table-server
         row-edit
         row-create
         disable-edit
         disable-create
         disable-clone
         disable-show
         :disable-empty-data-row-create="true"
      >
         <template v-slot:row.actions="{ item }">
            <v-btn
               :item="item"
               :label="$t('va.actions.show')"
               :color="'blue'"
               variant="text"
               exact
               @click.stop="getRoute(item)"
            >
               <v-icon size="small">mdi-eye</v-icon>
            </v-btn>
         </template>
      </va-data-table-server>
   </va-list>

 <v-card
      class="mx-auto mt-2"
      variant="flat"
   >
      <template v-slot:title>
         {{ $t("resources.jobtitles.createNewList") }}
      </template>
      <v-card-text>
         <div>
            {{ $t("resources.jobtitles.importDescription") }}
         </div>
      </v-card-text>
      <v-card-actions>
         <v-btn 
            color="primary"
            @click="downloadEmptyXls()">
            {{ $t("resources.jobtitles.downloadXls") }}
         </v-btn>
      </v-card-actions>
   </v-card>

   <v-card
      variant="flat"
      class="mt-2"
   >
      <v-card-text>
         <v-row class="mt-2">
            <v-col sm="2">
               <va-select-input
                  v-model="yearId"
                  reference="years"
                  variant="outlined"
                  clearable
                  :disabled="loadingStatus"
                  :error-messages="yearIdErrors"
               ></va-select-input>        
            </v-col>
            <v-col sm="2">
               <va-text-input
                  v-model="listName"
                  variant="outlined"
                  clearable
                  :disabled="loadingStatus"
                  :error-messages="listNameErrors"
               ></va-text-input>        
            </v-col>
            <v-col sm="8">
               <v-btn
                  v-if="loadingStatus"
                  color="primary"
                  class="mr-2"
                  @click="cancelSaveList()"
                  variant="outlined"
               >
                  {{ $t("va.actions.cancel") }}
               </v-btn>
               <v-btn 
                  :loading="loadingStatus"
                  color="primary"
                  variant="outlined" 
                  @click="saveList()">
                  {{ $t("resources.jobtitles.saveList") }}
               </v-btn>
            </v-col>
         </v-row>
      </v-card-text>
   </v-card>

   <v-card
      variant="flat"
      class="mt-2"
      v-if="!loadingStatus"
   >
      <v-card-text>
      <h5 class="h4 mb-3">Sheet Input Component</h5>
      <va-sheet-input
         icon="mdi-file-excel"
         items-per-page="100"
         upload-url="/jobtitlelists/upload"
         preview-url="/jobtitlelists/preview"
         remove-url="/jobtitlelists/remove"
         @importedItems="onItems"
      >
      </va-sheet-input>
      </v-card-text>
   </v-card>
</template>

<script>
import { useVuelidate } from "@vuelidate/core";
import { required } from "@vuelidate/validators";
import { provide } from 'vue';
import { mapActions } from "vuex"

export default {
  props: [],
  inject: ['admin'],
  setup() {
    provide('v$', useVuelidate() )
    return { v$: useVuelidate() }
  },
  provide() {
    return {
      validations: {
        form: {
          listName: {
            required
          },
        }
      },
      errors: {
        listNameErrors: (v$) => {
          const errors = [];
          if (!v$['form'].listName.$dirty) return errors;
          v$['form'].listName.required.$invalid &&
            errors.push(this.$t("v.text.required"));
          return errors;
        },
      }
    };
  },
  validations() {
    return {
      yearId: {
        required
      },   
      listName: {
        required
      }
    }
  },
  data() {
    return {
   cancel: false,
   status: false,
   loadingStatus: false,
   listId: null,
   listName: null,
   companyId: null,
   yearId: new Date().getFullYear(),
   loading: false,
   loadingList: false,
   importData: [],
   validationError: null,
      filters: [
        {
          source: "yearId",
          type: "selectfilter",
          attributes: {
            optionText: "name",
            multiple: true,
            reference: "years",
          }
        },
      ],
      fields: [
        {
          source: "yearId",
          type: "select",
          attributes: {
            reference: "years",
          },
          sortable: true,
        },
        {
          source: "listName",
          sortable: true,
        },
      ],
    }
  },
  computed: {
    yearIdErrors() {
      const errors = [];
      if (!this.v$.yearId.$dirty) return errors;
      this.v$.yearId.required.$invalid &&
        errors.push(this.$t("v.text.required"));
      return errors;
    },
    listNameErrors() {
      const errors = [];
      if (!this.v$.listName.$dirty) return errors;
      this.v$.listName.required.$invalid &&
        errors.push(this.$t("v.text.required"));
      return errors;
    }
  },
  methods: {
    ...mapActions({
      checkAuth: "auth/checkAuth",
    }),
   onItems(items, vError) {
      this.importData = items;
      if (items.length == 0) {
         this.validationError = null
      } else {
         this.validationError = vError
      }
   },
    getRoute(item) {
      let filter = null
      if (item.listId) {
         filter = '{ "yearId" : ["'+ item.yearId.id + '"] , "listId" : ["' + item.listId + '"] }';
      }
         this.$router.push({ name: "jobtitles_list", query: { filter: filter } });
    },
    async importStatus() {
      let Self = this;
      this.loadingStatus = true;
      try {
        //
        // get status with EventSource
        // 
        let user = await this.checkAuth();
        if (user) {
          const apiUrl = import.meta.env.VITE_API_URL;
          this.source = new EventSource(apiUrl + '/stream/events?userId=' + user.id + '&route=list');
          this.source.onmessage = function(e) {
            if (e.data) {
              let data = JSON.parse(e.data);
              if (data.status == 1 || data.status == true) {
                Self.source.close(); // lets close it when the process is done !
                Self.status = false;
                Self.loadingStatus = false
                Self.importData = []; // reset import data
                Self.admin.http({ method: "DELETE", url: "/jobtitlelists/reset" }); // reset all status
                Self.$store.dispatch("api/refresh", 'jobtitlelists');
              }
            }
          };
        }
      } catch (e) {
        if (e["response"]
          && e["response"]["status"]
          && e.response.status === 400) {
          this.admin.message("error", e.response.data.data.error);
        }
      }
    },
   saveList() {
      this.cancel = false;
      this.v$.yearId.$touch();
      this.v$.listName.$touch();
      if (this.v$.listName.$invalid || this.v$.yearId.$invalid) {
        return false;
      }
      if (this.validationError) {
         this.$store.commit("messages/show", { type: 'error', message: this.$t("employees.fixErrorsMessage") });
      } else {
         if (this.importData.length == 0) {
            this.$store.commit("messages/show", { type: 'error', message: this.$t("employees.importDataMessage") });
         } else {
            // save imported data
            // 
            this.admin.http({ method: "POST", url: "/jobtitlelists/import", data: { yearId: this.yearId, listName: this.listName } });
               // check status every 1 seconds
               // 
            this.importStatus();
         }
      }
   },
    cancelSaveList() {
      this.cancel = true;
      this.loadingStatus = false;
      this.importData = []; // reset import data
      this.admin.http({ method: "DELETE", url: "/jobtitlelists/reset" }); // reset all status
      this.$store.dispatch("api/refresh", 'jobtitlelists'); // refresh page
    },
   downloadEmptyXls() {
      window.location.href = "/src/assets/JobTitles.xlsx"
   }
  }
}
</script>