<script lang="tsx">
import {
  computed, defineComponent, watch, type PropType,
} from 'vue'
import useCheckedItems from '../../composables/use-checked-items'
import type { ApiInterface } from '../../lib'
import type { ColumnInterface } from '../tables/DefaultTableInterfaces'
import DefaultTable from '../tables/default-table/DefaultTable.vue'
import ShallowTable from '../tables/shallow-table/ShallowTable.vue'
import type { TableProps } from './types'

export default defineComponent({
  props: {
    /**
     * Отображается только правая таблица с выбранными значениями
     * Все checkbox'ы скрываются
     */
    isDisabled: {
      type: Boolean,
      default: false,
    },

    /**
     * Настройки (пропсы), прокидываемые в левую таблицу (основную)
     */
    leftTableSettings: {
      type: Object as PropType<TableProps>,
      default: undefined,
    },

    /**
     * Настройки (пропсы), прокидываемые в правую таблицу (таблица выбранных элементов)
     */
    rightTableSettings: {
      type: Object as PropType<TableProps>,
      default: undefined,
    },

    /**
     * Основной массив выбранных элементов
     */
    modelValue: {
      type: Array as PropType<any[]>,
      required: true,
    },

    /**
     * Используется для левой таблицы
     * Подробнее смотреть в компоненте используемой таблицы
     */
    api: {
      type: Object as PropType<ApiInterface>,
      default: undefined,
    },

    /**
     * Используются для обеих таблиц
     * Подробнее смотреть в компоненте используемой таблицы
     */
    columns: {
      type: Array as PropType<ColumnInterface[]>,
      required: true,
    },

    /**
     * Используется для левой таблицы
     * Подробнее смотреть в компоненте используемой таблицы
     */
    endpoint: {
      type: String,
      required: true,
    },

    /**
     * Используется для левой таблицы
     *
     * Дефолтные квери параметры
     */
    defaultQueryParams: {
      type: Object as PropType<Record<string, string|string[]>>,
      default: () => ({}),
    },

    /**
     * Используется для левой таблицы
     * Подробнее смотреть в компоненте используемой таблицы
     */
    sortFieldKey: {
      type: String,
      required: true,
    },

    /**
     * Фильтрация правой таблицы
     */
    rightTableFilter: {
      type: Function as PropType<(items: any[], params: Record<string, string | string[]>) => any[]>,
      default: undefined,
    },

    /**
     * Хук, запускающийся после выбора элемента любой из таблиц
     */
    onValueChange: {
      type: Function as PropType<(checkedItems: any[]) => void>,
      required: true,
    },
    /**
     * Функция, в которой можно привести массив файлов к нужному формату
     */
    itemConverter: {
      type: Function as PropType<(item: any) => any>,
    },
  },

  setup(props) {
    const checkedItems = useCheckedItems(props.modelValue)
    const loseRelationCheckedItems = computed(() => [...checkedItems.checkedItems.value])

    watch(checkedItems.checkedItems, props.onValueChange, { deep: true })

    return () => (
      <div class={`ark-listSelect ${props.isDisabled ? 'disabled' : ''}`}>

        {!props.isDisabled && (
          <div class="ark-listSelect-block">
            <DefaultTable
              {...props.leftTableSettings}

              isHideActionBar
              canCheck="many"
              columns={props.columns}
              clearCheckedOnParamsChange={false}
              checkedItemsInterface={checkedItems}
              itemConverter={props.itemConverter}

              api={props.api}
              endpoint={props.endpoint}
              sortFieldKey={props.sortFieldKey}
              defaultQueryParams={props.defaultQueryParams}
            />
          </div>
        )}

        <div class="ark-listSelect-block">
          <ShallowTable
            {...props.rightTableSettings}

            isHideActionBar
            canCheck={props.isDisabled ? 'none' : 'many'}
            items={loseRelationCheckedItems.value}
            columns={props.columns}
            checkedItemsInterface={props.isDisabled ? undefined : checkedItems}
            applyFilters={props.rightTableFilter}
          />
        </div>

      </div>
    )
  },
})
</script>

<style lang="scss" scoped>
.ark-listSelect {
  width: 100%;
  height: 100%;

  gap: 4px;
  display: flex;

  &-block {
    width: 50%;
    height: 100%;

    display: block;

    padding: 24px;
    box-sizing: border-box;
    background-color: #FFF;

    border-radius: 8px;
    border: 1px solid #F0F1F7;
  }

  &::v-deep {
    .ark-ui-table-wrapper {
      border: none;
    }

    .ark-ui-table-top {
      padding-left: 0;
    }
  }

  &.disabled {
    .ark-listSelect-block {
      width: 100%;
    }
  }
}
</style>
