import { ref } from 'vue'
import api from '../../api'
import { useArkUi } from '../../composables/use-ark-ui'
import DefaultCheckbox from '../checkbox/ARKCheckbox.vue'
import EnumSelectMultiple from './enum-select-multiple.tsx'

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

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

export default {
  title: 'The Design system/Selects/Enum/Enum select multiple',
  component: EnumSelectMultiple,
  args: {
    endpoint: 'catEnum',
    placeholder: 'Плейсхолдер',
    disabled: false,
    showItemsCount: DEFAULT_SHOW_ITEMS_COUNT,
    errors: [],
  },
}

const modelValue1 = ref([])
const modelValue2 = ref([])
const modelValue3 = ref([])
const modelValue4 = ref([])
const modelValue5 = ref([])
const modelValue6 = ref([])

const selectItemSlot = (item, { isSelected, toggleItem }) => (
  <div
    key={item.id}
    class={`ark-ui-select-item ${isSelected(item) ? 'is-selected' : ''}`}
    onClick={(e) => { e.stopPropagation(); toggleItem(item) }}
  >
    <DefaultCheckbox modelValue={isSelected(item)} onValueChange={() => ({})} />
    <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 1fr;">
        <EnumSelectMultiple
          {...args }
          title='Заголовок'
          modelValue={modelValue1.value}
          onValueChange={(v) => { modelValue1.value = v }}/>
        <EnumSelectMultiple
          {...args }
          preselected={true}
          title='Предвыбранный'
          modelValue={modelValue4.value}
          onValueChange={(v) => { modelValue4.value = v }}
        />
        <div class="default-table-header ark-ui-storybook-table-header">
          <EnumSelectMultiple
            {...args }
            modelValue={modelValue2.value}
            onValueChange={(v) => { modelValue2.value = v }}
            title='Для таблицы'/>
        </div>
        <EnumSelectMultiple
          {...args }
          modelValue={modelValue3.value}
          onValueChange={(v) => { modelValue3.value = v }}
          title="Отключен"
          disabled={true}/>
        <div style="margin-top: 24px;">
          <EnumSelectMultiple
            {...args}
            modelValue={modelValue5.value}
            onValueChange={(v) => { modelValue5.value = v }}/>
          <p class="ark-ui-select-title" style="margin-top: 8px;">Без лейбла</p>
        </div>
        <div/><div/><div/><div>Size S</div><div/><div/><div/>
        <EnumSelectMultiple
          {...args }
          title='Заголовок'
          modelValue={modelValue1.value}
          size='S'
          onValueChange={(v) => { modelValue1.value = v }}/>
        <EnumSelectMultiple
          {...args }
          preselected={true}
          title='Предвыбранный'
          size='S'
          modelValue={modelValue4.value}
          onValueChange={(v) => { modelValue4.value = v }}
        />
        <div class="default-table-header ark-ui-storybook-table-header">
          <EnumSelectMultiple
            size='S'
            {...args }
            modelValue={modelValue2.value}
            onValueChange={(v) => { modelValue2.value = v }}
            title='Для таблицы'/>
        </div>
        <EnumSelectMultiple
          {...args }
          size='S'
          modelValue={modelValue3.value}
          onValueChange={(v) => { modelValue3.value = v }}
          title="Отключен"
          disabled={true}/>
        <div style="margin-top: 24px;">
          <EnumSelectMultiple
            {...args}
            modelValue={modelValue5.value}
            size='S'
            onValueChange={(v) => { modelValue5.value = v }}/>
          <p class="ark-ui-select-title" style="margin-top: 8px;">Без лейбла</p>
        </div>
        <div style="margin-top: 24px;">
          <EnumSelectMultiple
            {...args}
            modelValue={modelValue6.value}
            size='S'
            itemSlot={selectItemSlot}
            onValueChange={(v) => { modelValue6.value = v }}/>
          <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 items
  }
}
const modelValueDP = ref([])

const DataProviderTemplate = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <EnumSelectMultiple
        style="width: 300px;"
        dataProvider={{
          get: generateDPG('EnumSelectMultiple'),
        }}
        modelValue={modelValueDP.value}
        onValueChange={(v) => { modelValueDP.value = v }}
        title='DataProviderEnumSelectMultiple'
      />
    )
  },
})

export const DataProvider = DataProviderTemplate.bind({})