import { type Ref, ref } from 'vue'
import FilterBar from './FilterBar.vue'
import { type FilterBarInterface } from './FilterBarInterfaces'
import FilterBarButton from './FilterBarButton.vue'
import { useArkUi } from '../../composables/use-ark-ui'
import { type FilterInterface } from './FilterInterfaces'
import api from '../../api'

useArkUi({
  api,
  responseTotalKey: 'count',
  paginationType: 'limit',
  responseItemsKey: 'results',
})

const options = [
  { id: 'id1', name: 'Вариант 1' },
  { id: 'id2', name: 'Вариант 2' },
  { id: 'id3', name: 'Вариант 3' },
  { id: 'id4', name: 'Вариант 4' },
  { id: 'id5', name: 'Вариант 5' },
]

const filters: FilterInterface[] = [
  {
    label: 'Text',
    filter: {
      type: 'text',
    },
  },
  {
    label: 'Calendar',
    filter: {
      type: 'calendar',
      dateParam: 'calendarParam',
    },
  },
  {
    label: 'Period calendar',
    filter: {
      type: 'periodCalendar',
      startDateParam: 'periodStartDateParam',
      endDateParam: 'periodEndDateParam',
    },
  },
  {
    label: 'Week calendar',
    filter: {
      type: 'weekCalendar',
      startDateParam: 'weekStartDateParam',
      endDateParam: 'weekEndDateParam',
    },
  },
  {
    label: 'Default Select',
    filter: {
      type: 'defaultSelect',
      selectedParam: 'defaultSelectParam',
      options,
    },
  },
  {
    label: 'Default Select Multiple',
    filter: {
      type: 'multipleDefaultSelect',
      selectedParam: 'defaultSelectMultipleParam',
      options,
    },
  },
  {
    label: 'Relation Select',
    filter: {
      type: 'relationSelect',
      endpoint: '/region',
      selectedParam: 'relationSelectParam',
    },
  },
  {
    label: 'Relation Select Multiple',
    filter: {
      type: 'multipleRelationSelect',
      endpoint: '/regions',
      selectedParam: 'multipleRelationSelectParam',
    },
  },
  {
    label: 'Enum Select',
    filter: {
      type: 'enumSelect',
      endpoint: '/regionEnum',
      selectedParam: 'enumSelectParam',
    },
  },
  {
    label: 'Enum Select Multiple',
    filter: {
      type: 'multipleEnumSelect',
      endpoint: '/regionEnum',
      selectedParam: 'multipleEnumSelectParam',
    },
  },
  {
    label: 'Radio Select',
    filter: {
      type: 'radioSelect',
      selectedParam: 'radioSelectParam',
      options,
    },
  },
  {
    label: 'Checkbox Select',
    filter: {
      type: 'checkboxSelect',
      selectedParam: 'checkboxSelectParam',
      options,
    },
  },
  {
    label: 'Range Number',
    filter: {
      type: 'rangeNumber',
      fromParam: 'rangeNumberFromParam',
      toParam: 'rangeNumberToParam',
      // serializationType: 'arkspace',
      // arkspaceSerializationTypeParam: 'string',
    },
  },
  {
    label: 'Text Search',
    filter: {
      type: 'TextSearch',
      searchParam: 'textSearchParam',
    },
  },
]

const isOpen = ref(false)

const filterbar: Ref<FilterBarInterface | null> = ref(null)
const params: Ref<object | undefined> = ref(undefined)

const Template = (args: any) => ({
  props: Object.keys(args),
  render() {
    return (
      <div>
        <div>
          <FilterBarButton
            onClick={() => { isOpen.value = true }}
            counter={filterbar.value?.activeFiltersCount}
          />
        </div>
        <FilterBar
          label={args.label}
          isActive={isOpen.value}
          ref={filterbar}
          filters={filters}
          onClose={() => { isOpen.value = false }}
          onApply={(v) => { params.value = v; console.log(params.value) }}
        />
      </div>
    )
  },
})

export default {
  title: 'The Design system/FilterBar/FilterBar',
  tags: ['autodocs'],
  component: FilterBar,
  args: {
    label: 'Фильтр',
    filters,
  },
}

export const Primary = Template.bind({})