<template>
  <ul v-if="!tableLoading" class="header__filter header__filter--full-width">
    <li class="header__filter-item">
      <GridViewHide
        :view="view"
        :fields="fieldsAllowedToBeHidden"
        :read-only="readOnly"
        :store-prefix="storePrefix"
      ></GridViewHide>
    </li>
    <li
      class="
        header__filter-item header__filter-item--right
        margin-top-1 margin-right-1
      "
    >
      <BaserowLogo v-if="view.show_logo && isPublic" />
    </li>
    <li class="header__filter-item">
      <ViewSearch
        :view="view"
        :fields="fields"
        :store-prefix="storePrefix"
        @refresh="$emit('refresh', $event)"
      ></ViewSearch>
    </li>
  </ul>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

import GridViewHide from '@baserow/modules/database/components/view/grid/GridViewHide'
import ViewSearch from '@baserow/modules/database/components/view/ViewSearch'
import BaserowLogo from '@baserow/modules/core/components/BaserowLogo'

export default {
  name: 'GridViewHeader',
  components: { BaserowLogo, GridViewHide, ViewSearch },
  props: {
    view: {
      type: Object,
      required: true,
    },
    fields: {
      type: Array,
      required: true,
    },
    readOnly: {
      type: Boolean,
      required: true,
    },
    storePrefix: {
      type: String,
      required: true,
    },
  },
  computed: {
    ...mapState({
      tableLoading: (state) => state.table.loading,
    }),
    ...mapGetters({
      isPublic: 'page/view/public/getIsPublic',
    }),
    fieldsAllowedToBeHidden() {
      return this.fields.filter((field) => !field.primary)
    },
  },
}
</script>