<script lang="tsx">
import {
  type PropType,
  type Ref,
  defineComponent,
  computed,
  ref,
  watch,
} from 'vue'
import ARKSettings from './ARKSettings.vue'
import { type ComputedColumnInterface, type TableSettingsInterface } from './DefaultTableInterfaces'
import ARKChips from './ARKChips.vue'
import { DefaultButton } from '../../lib'

export default defineComponent({
  props: {
    buttons: {
      type: Function as PropType<() => JSX.Element>,
    },
    leftHeaderSlot: {
      type: Function as PropType<() => JSX.Element>,
    },
    columns: {
      type: Object as PropType<Ref<ComputedColumnInterface[]>>,
      required: true,
    },
    computedColumns: {
      type: Object as PropType<Ref<ComputedColumnInterface[]>>,
      required: true,
    },
    count: {
      type: [String, Number] as PropType<string | number>,
      required: true,
    },
    headerInfo: {
      type: Function as PropType<() => JSX.Element>,
    },
    isCountLoading: {
      type: Boolean,
      default: false,
    },
    isDisableTop: {
      type: Boolean,
      default: false,
    },
    isShowSettings: {
      type: Boolean,
      default: true,
    },
    isShowSmallTitle: {
      type: Boolean,
      default: false,
    },
    isShowTitle: {
      type: Boolean,
      default: true,
    },
    isShowCount: {
      type: Boolean,
      default: true,
    },
    isSmallSettingsButton: {
      type: Boolean,
      default: false,
    },
    onUpdateSettings: {
      type: Function as PropType<() => void>,
      required: true,
    },
    settingsExpose: {
      type: Object as PropType<Ref<TableSettingsInterface>>,
      required: true,
    },
    title: {
      type: String,
      required: false,
    },
  },

  setup(props) {
    const isShowChips = computed(() => props.columns.value.filter((c) => c.filter.isVisible).length || props.columns.value.some(({ filter }) => filter.hasValues()))

    return () => !props.isDisableTop && (
      <div class={`ark-ui-table-top ${isShowChips.value ? 'ark-ui-table-top-small-padding-bottom' : ''}`}>

        <div class="ark-ui-table-top-info">
          {props.title && <div class="ark-ui-table-title">{props.title}</div>}

          {props.leftHeaderSlot && (
            <div class="ark-ui-table-left-header-slot">
              {props.leftHeaderSlot()}
            </div>
          )}

          <div class="ark-ui-table-count">
            {props.isShowCount && (
              <div class="ark-ui-table-count-number">
                Всего: { props.isCountLoading ? <div class="ark-ui-table-count-loader" /> : props.count }
              </div>
            )}
            {props.headerInfo && props.headerInfo()}
          </div>

          {isShowChips.value && (
            <div class="ark-ui-table-chips">
              {props.columns.value.filter((c) => c.filter.isVisible).map((item) => (
                <ARKChips key={item.name} item={item}/>
              ))}

              {props.columns.value.some(({ filter }) => filter.hasValues()) && (
                <DefaultButton
                  type='secondary'
                  size='S'
                  label='Сбросить все'
                  onClick={() => {
                    props.columns.value.forEach(({ filter }) => filter.removeValues())
                  }}
                />
              )}
            </div>)}
        </div>

        <div class="ark-ui-table-buttons">
          <ARKSettings
            ref={props.settingsExpose}
            columns={props.columns.value}
            onUpdate={props.onUpdateSettings}
            v-show={props.isShowSettings}
            isSmallSettingsButton={props.isSmallSettingsButton}
          />

          {props.buttons && props.buttons()}
        </div>
      </div>
    )
  },
})
</script>
