<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('Categories') }}</div>
      <div>
        <a-button type="primary" @click="visible = true">{{ trans('Create') }}</a-button>
      </div>
    </div>
    <!-- TABLE -->
    <a-table
      :dataSource="categories"
      :columns="columns"
      :pagination="false"
      rowKey="id"
    >
      <span slot="locale" slot-scope="title">
        {{ title[$page.props.locale || 'tm'] }}
      </span>
      <span slot="actions" slot-scope="_, row">
        <a-tooltip :title="trans('Create')">
          <a-button
            type="danger"
            ghost
            icon="delete"
            @click="() => destroy('categories', 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')"
      destroyOnClose
    >
      <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>
    </a-modal>
  </div>
</template>

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

  metaInfo() {
    return {
      title: this.trans('Categories'),
    }
  },

  data() {
    return {
      visible: false,
      locale: this.$page.props.locale || 'tm',
      form: this.$inertia.form({
        title: {
          tm: undefined,
          ru: undefined,
          en: undefined,
        },
      }),
    };
  },

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

  methods: {
    submit() {
      this.form.post(this.route("categories.store"), {
        onSuccess: () => {
          this.visible = false;
          this.$message.success(this.trans('Success message'));
          this.form.reset();
        },
      });
    },
  },
};
</script>
