import { ref } from 'vue'
import api from '../../api'
import { useArkUi } from '../../composables/use-ark-ui'
import RelationSelect from './relation-select'

import './story.scss'
import { DEFAULT_SHOW_ITEMS_COUNT } from './template'

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

export default {
  title: 'The Design system/Selects/Relation/Relation select',
  component: RelationSelect,
  tags: ['autodocs'],
  args: {
    isWithCopy: false,
    endpoint: 'article',
    placeholder: 'Плейсхолдер',
    disabled: false,
    showItemsCount: DEFAULT_SHOW_ITEMS_COUNT,
    errors: [],
  },
}

const modelValue1 = ref(undefined)
const modelValue2 = ref(undefined)
const modelValue3 = ref(undefined)
const modelValue4 = ref(undefined)
const modelValue5 = ref(undefined)
const modelValue6 = ref(undefined)
const modelValue7 = ref(undefined)
const modelValue8 = ref(undefined)

const selectItemSlot = (item, { isSelected, toggleItem }) => (
  <div
    key={item.id}
    class={`ark-ui-select-item ${isSelected(item) ? 'is-selected' : ''}`}
    onClick={(e) => { e.stopPropagation(); toggleItem(item) }}
  >
    <div>
      <div>{ item.name }</div>
      <div style='font-size: 12px; color: #A3A7B9;'>Бейдж — 6655555666</div>
      <div style='font-size: 12px; color: #A3A7B9;'>GUID — WWW111WW</div>
    </div>
  </div>
)

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <div style="gap: 24px; display: grid; grid-template-columns: 1fr 1fr 1fr; margin-bottom: 300px;">
        <RelationSelect
          {...args }
          modelValue={modelValue1.value}
          onValueChange={(v) => { modelValue1.value = v }}
          title='Для формы'
          appearance='form'
          resetable={true}
        />
        <RelationSelect
          {...args }
          modelValue={modelValue5.value}
          onValueChange={(v) => { modelValue5.value = v }}
          title='Предвыбранный'
          appearance='form'
          preselected={true}
          resetable={true}
        />
        <RelationSelect
          {...args }
          modelValue={modelValue5.value}
          onValueChange={(v) => { modelValue5.value = v }}
          title='Предвыбранный'
          appearance='form'
          preselected={true}
          resetable={true}
          disabled={true}
        />
        <RelationSelect
          {...args }
          modelValue={modelValue2.value}
          onValueChange={(v) => { modelValue2.value = v }}
          title='Для фильтра'
        />
        <div class="default-table-header ark-ui-storybook-table-header">
          <RelationSelect
            {...args }
            modelValue={modelValue3.value}
            onValueChange={(v) => { modelValue3.value = v }}
            title='Для таблицы'
          />
        </div>
        <RelationSelect
          { ...args }
          modelValue={modelValue4.value}
          onValueChange={(v) => { modelValue4.value = v }}
          title='Отключен'
          disabled={true}
          appearance='form'
        />
        <RelationSelect
          { ...args }
          modelValue={modelValue4.value}
          onValueChange={(v) => { modelValue4.value = v }}
          title='С левым слотом'
          appearance='form'
          placeholder="Выбери значение!"
          leftSlot={(value) => <div style="margin-right: 10px; white-space: nowrap">ID: {value.id}</div>}
        />
        <RelationSelect
          { ...args }
          title='С дополнительными элементами'
          modelValue={modelValue6.value}
          onValueChange={(v) => { modelValue6.value = v }}
          appearance='form'
          additionalItems={[
            { id: 'empty', name: 'Дополнительный элемент 1' },
            { id: 'empty2', name: 'Дополнительный элемент 2' },
            { id: 'empty3', name: 'Дополнительный элемент 3' },
          ]}
        />
        <div style="margin-top: 24px;">
          <RelationSelect
            {...args }
            modelValue={modelValue7.value}
            onValueChange={(v) => { modelValue7.value = v }}
            resetable={true}
          />
          <p class="ark-ui-select-title" style="margin-top: 8px;">Без лейбла</p>
        </div>
        <div/><div/><div>Size S</div><div/><div/>
        <RelationSelect
          {...args }
          modelValue={modelValue1.value}
          onValueChange={(v) => { modelValue1.value = v }}
          title='Для формы'
          appearance='form'
          resetable={true}
          size={'S'}
        />
        <RelationSelect
          {...args }
          modelValue={modelValue5.value}
          onValueChange={(v) => { modelValue5.value = v }}
          title='Предвыбранный'
          appearance='form'
          preselected={true}
          resetable={true}
          size={'S'}
        />
        <RelationSelect
          {...args }
          modelValue={modelValue2.value}
          onValueChange={(v) => { modelValue2.value = v }}
          title='Для фильтра'
          size={'S'}
        />
        <div class="default-table-header ark-ui-storybook-table-header">
          <RelationSelect
            {...args }
            modelValue={modelValue3.value}
            onValueChange={(v) => { modelValue3.value = v }}
            title='Для таблицы'
            size={'S'}
          />
        </div>
        <RelationSelect
          { ...args }
          modelValue={modelValue4.value}
          onValueChange={(v) => { modelValue4.value = v }}
          title='Отключен'
          disabled={true}
          appearance='form'
          size={'S'}
        />
        <RelationSelect
          { ...args }
          title='С дополнительными элементами'
          modelValue={modelValue6.value}
          onValueChange={(v) => { modelValue6.value = v }}
          appearance='form'
          size={'S'}
          additionalItems={[
            { id: 'empty', name: 'Дополнительный элемент 1' },
            { id: 'empty2', name: 'Дополнительный элемент 2' },
            { id: 'empty3', name: 'Дополнительный элемент 3' },
          ]}
        />
        <div style="margin-top: 24px;">
          <RelationSelect
            {...args }
            modelValue={modelValue7.value}
            onValueChange={(v) => { modelValue7.value = v }}
            resetable={true}
            size={'S'}
          />
          <p class="ark-ui-select-title" style="margin-top: 8px;">Без лейбла</p>
        </div>
        <div/>
        <div/>
        <div style="margin-top: 24px;">
          <RelationSelect
            {...args }
            modelValue={modelValue8.value}
            onValueChange={(v) => { modelValue8.value = v }}
            appearance='form'
            resetable={true}
            itemSlot={selectItemSlot}
          />
          <p class="ark-ui-select-title" style="margin-top: 8px;">С кастомным слотом под элементы</p>
        </div>
      </div>
    )
  },
})

export const Primary = Template.bind({})

function generateDPG(name) {
  return async function dataProviderGet(options) {
    const items = [...Array(options.params.limit || 20).keys()].map((i) => i + (options.params.offset || 0)).map((i) => ({ id: `id-${i}`, name: `${name}-item ${i}` }))

    return {
      count: Infinity,
      results: items,
      per_page: options.params.limit || 20,
    }
  }
}
const modelValueDP = ref()

const DataProviderTemplate = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <RelationSelect
        style="width: 300px;"
        dataProvider={{
          get: generateDPG('relation'),
        }}
        modelValue={modelValueDP.value}
        onValueChange={(v) => { modelValueDP.value = v }}
        title='DataProvider'
        appearance='form'
        resetable={true}
      />
    )
  },
})

export const DataProvider = DataProviderTemplate.bind({})