<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">
            <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>
        </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>