import { type Meta } from '@storybook/vue3'
import { ref } from 'vue'
import api from '../../../api'
import { useArkUi } from '../../../composables/use-ark-ui'
import { type ColumnInterface } from '../../tables/DefaultTableInterfaces'
import ListSelect from '../component.vue'

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

export default {
  title: 'The Design system/List select',
  component: ListSelect,
  args: {
    isDisabled: false,
    leftTableSettings: {
      title: 'Левая таблица (основная)',
      showCount: false,
      showSettings: false,
    },
    rightTableSettings: {
      title: 'Правая таблица (таблица выбранных элементов)',
      showCount: false,
      showSettings: false,
    },
  },
} satisfies Meta<typeof ListSelect>

const Template = (args: any) => ({
  setup() {
    delete args.onValueChange

    const items = ref<any[]>([])
    const columns: ColumnInterface[] = [
      {
        name: 'ID',
        visibleByDefault: true,
        sort: 'id',
        field: (item: any) => item.id,
        header: {
          type: 'text',
        },
      },
      {
        name: 'Название',
        visibleByDefault: true,
        sort: 'name',
        field: (item: any) => item.name,
        header: {
          type: 'multipleRelationSelect',
          endpoint: '/product',
          selectedParam: 'name',
        },
        width: 400,
      },
      {
        name: 'Количество',
        visibleByDefault: true,
        field: (item: any) => item.name,
        header: {
          type: 'numberSearch',
          searchParam: 'count',
        },
        width: 400,
      },
      {
        name: 'Бренд',
        sort: 'brand',
        visibleByDefault: true,
        field: (item: any) => item.brand.name,
        header: {
          type: 'text',
        },
      },
      {
        name: 'Регион',
        sort: 'region',
        visibleByDefault: true,
        field: (item: any) => item.region.name,
        header: {
          type: 'rangeNumber',
          serializationType: 'arkspace',
          arkspaceSerializationTypeParam: 'string',
          // endpoint: '/region'
          // options: [
          //   { id: '1', name: 'Вариант 1' },
          //   { id: '2', name: 'Вариант 2' },
          //   { id: '3', name: 'Вариант 3' },
          //   { id: '4', name: 'Вариант 4' },
          //   { id: '5', name: 'Вариант 5' }
          // ]
        },
      },
      {
        name: 'Артикул',
        visibleByDefault: true,
        sort: 'article',
        field: (item: any) => item.article.name,
        header: {
          type: 'text',
        },
      },
      {
        name: 'Город',
        visibleByDefault: false,
        field: (item: any) => item.city,
        header: {
          type: 'text',
        },
      },
      {
        name: 'Адрес салона',
        visibleByDefault: false,
        field: (item: any) => item.address,
        header: {
          type: 'text',
        },
      },
      {
        name: 'Цвет',
        visibleByDefault: false,
        field: (item: any) => item.color,
        header: {
          type: 'text',
        },
      },
      {
        name: 'Мульти параметры',
        visibleByDefault: true,
        field: (item: any) => item.region.name,
        header: {
          type: 'multipleParamsRelationSelect',
          endpoint: '/product',
          titleKey: 'name',
          itemConverter: (v) => ({
            id: v.name + v.region.name, name: v.name, param1: v.region.name, param2: v.brand.name,
          }),
          paramsMap: {
            firstParam: 'param1',
            secondParam: 'param2',
          },
        },
      },
      {
        name: 'Дата',
        field: (item: any) => item.name,
        header: {
          type: 'periodCalendar',
          startDateParam: 'startDateParam',
          endDateParam: 'endDateParam',
          isSetOnlyFullDate: false,
          serializationType: 'default',
          // arkspaceSerializationTypeParam: 'test',
          // defaultValue: {
          //   startDate: moment(),
          // },
        },
        // header: {
        //   type: 'calendar',
        //   dateParam: 'startDateParam',
        //   defaultValue: moment(),
        // },
      },
    ]

    const onChange = (value: any[]) => {
      items.value = value
    }

    return () => (
      <div style="max-width: 95vw; max-height: 95vh;">

        <ListSelect
          {...args}
          columns={columns}
          endpoint="/product"
          modelValue={items.value}
          onValueChange={onChange}
        />

      </div>
    )
  },
})

export const Primary = Template.bind({})