<template>
  <div>
    <div
      class="flex bg-white p-4 text-lg border-b border-gray-300 h-20 items-center"
    >
      <div class="flex-1 font-semibold">{{ trans("Archives") }}</div>
      <div class="space-x-3">
        <a-radio-group v-model="selectedType" button-style="solid">
          <a-radio-button value="import">
            {{ trans("Import") }}
          </a-radio-button>
          <a-radio-button value="export">
            {{ trans("Export") }}
          </a-radio-button>
        </a-radio-group>
        <a-button type="primary" @click="visible = true">{{
          trans("Create")
        }}</a-button>
      </div>
    </div>
    <!-- TABLE -->
    <a-table
      :dataSource="groups"
      :columns="columns"
      :pagination="false"
      rowKey="id"
    >
      <span slot="locale" slot-scope="title">
        {{ title[$page.props.locale || "tm"] }}
      </span>
      <span slot="count" slot-scope="_, row">
        <span v-if="selectedType === 'export'">{{ row.exports_count }}</span>
        <span v-else>{{ row.imports_count }}</span>
      </span>
      <span slot="is_default" slot-scope="is_default">
        <span
          v-if="is_default"
          class="px-2 py-1 rounded-md bg-primary uppercase font-semibold text-xs text-white"
          >{{ trans("Selected") }}</span
        >
      </span>
      <span slot="actions" slot-scope="_, row">
        <a-tooltip v-if="row.file" :title="trans('Download excel')">
          <a-button icon="file-excel" @click="() => download(row.hashid)" />
        </a-tooltip>
        <!-- <a-tooltip :title="trans('Select')">
          <a-button icon="check" @click="() => makeDefault(row.id)" />
        </a-tooltip> -->
        <a-tooltip :title="trans('Edit')">
          <a-button
            icon="edit"
            @click="
              () => {
                visible = true;
                selectedGroup = row;
              }
            "
          />
        </a-tooltip>
        <a-tooltip :title="trans('Delete')">
          <a-button
            type="danger"
            ghost
            icon="delete"
            @click="() => destroy('groups', row.id)"
          />
        </a-tooltip>
      </span>
    </a-table>
    <!-- MODAL -->
    <a-modal
      v-model="visible"
      :title="trans('Create')"
      :confirm-loading="form.processing"
      @ok="submit"
      :ok-text="trans('OK')"
      :cancel-text="trans('Close')"
      :destroy-on-close="true"
    >
      <a-form @keypress.enter.native="submit">
        <a-form-item
          :label="trans('Title')"
          :validateStatus="
            formStatus('title') ||
            formStatus('title.tm') ||
            formStatus('title.ru') ||
            formStatus('title.en')
          "
          :help="
            formHelp('title') ||
            formHelp('title.tm') ||
            formHelp('title.ru') ||
            formHelp('title.en')
          "
        >
          <a-input-group compact class="flex">
            <a-input
              v-model="form.title[locale]"
              :placeholder="trans('Title')"
            />
            <a-select class="w-44" v-model="locale">
              <a-select-option value="tm">Türkmençe</a-select-option>
              <a-select-option value="ru">Русский</a-select-option>
              <a-select-option value="en">English</a-select-option>
            </a-select>
          </a-input-group>
        </a-form-item>
        <a-form-item
          label=""
          :validateStatus="formStatus('is_default')"
          :help="formHelp('is_default')"
        >
          <a-checkbox v-model="form.is_default"
            >{{ trans("Selected") }}?</a-checkbox
          >
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import columns from "@/data/group-columns";
export default {
  props: ["groups", "type"],

  metaInfo() {
    return {
      title: this.trans("Archives"),
    };
  },

  data() {
    return {
      locale: this.$page.props.locale || "tm",
      visible: false,
      selectedGroup: undefined,
      selectedType: this.type || "import",
      form: this.$inertia.form({
        title: {
          tm: undefined,
          ru: undefined,
          en: undefined,
        },
        type: "import",
        is_default: false,
      }),
    };
  },

  computed: {
    columns() {
      return columns.map((column) => {
        column.title = this.trans(column.title);
        return column;
      });
    },
  },

  watch: {
    selectedType(value) {
      this.$inertia.get(
        this.route("groups", { type: value }),
        {},
        { preserveState: true }
      );
      this.form.type = value;
    },

    visible(value) {
      if (value && this.selectedGroup) {
        this.form.title = this.selectedGroup.title;
        this.form.type = this.selectedGroup.type;
        this.form.is_default = !!this.selectedGroup.is_default;
      } else {
        this.selectedGroup = undefined;
      }

      if (this.selectedType !== this.form.type) {
        this.form.type = this.selectedType;
      }
    },
  },

  methods: {
    submit() {
      this.selectedGroup ? this.update() : this.create();
    },

    create() {
      this.form.post(this.route("groups.store"), {
        onSuccess: () => {
          this.visible = false;
          this.$message.success(this.trans("Success message"));
          this.form.reset();
        },
      });
    },

    update() {
      this.form.put(
        this.route("groups.update", { group: this.selectedGroup.id }),
        {
          onSuccess: () => {
            this.visible = false;
            this.$message.success(this.trans("Success message"));
            this.form.reset();
          },
        }
      );
    },

    makeDefault(group) {
      this.$inertia.put(
        this.route("groups.update", { group }),
        {
          is_default: true,
          type: this.selectedType,
        },
        {
          onSuccess: () => {
            this.$message.success(this.trans("Success message"));
          },
        }
      );
    },
  },
};
</script>
