import { ref } from 'vue'
import DefaultSelectMultiple from './default-select-multiple.tsx'

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

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

const items = [
  { id: '1', name: 'Вариант 1' },
  { id: '2', name: 'Вариант 2' },
  { id: '3', name: 'Вариант 3' },
  { id: '4', name: 'Вариант 4' },
  { id: '5', name: 'Длинный в две строки' },
]

const itemsShort = [
  { id: '1', name: 'Вариант 1' },
  { id: '2', name: 'Вариант 2' },
]

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

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    return (
      <div style="gap: 24px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;">
        <DefaultSelectMultiple
          {...args }
          items={items}
          modelValue={modelValue1.value}
          onValueChange={(v) => { modelValue1.value = v }}
          title='Заголовок'/>
        <div class="default-table-header ark-ui-storybook-table-header" style="margin-top: 24px;">
          <DefaultSelectMultiple
            {...args }
            items={items}
            modelValue={modelValue2.value}
            onValueChange={(v) => { modelValue2.value = v }}
            title='Для таблицы'/>
        </div>
        <DefaultSelectMultiple
          {...args }
          items={items}
          modelValue={modelValue3.value}
          onValueChange={(v) => { modelValue3.value = v }}
          title='Отключен'
          disabled={true}/>
        <div style="margin-top: 24px;">
          <DefaultSelectMultiple
            {...args }
            items={items}
            modelValue={modelValue4.value}
            onValueChange={(v) => { modelValue4.value = v }}/>
          <p class="ark-ui-select-title" style="margin-top: 8px;">Без лейбла</p>
        </div>
        <DefaultSelectMultiple
          {...args }
          items={items}
          title='С поиском'
          modelValue={modelValue4.value}
          onValueChange={(v) => { modelValue4.value = v }}
          hideSearch={false}
        />
        <DefaultSelectMultiple
          {...args }
          canCheckAll
          items={items}
          title='С поиском и с "Выбрать все"'
          modelValue={modelValue4.value}
          onValueChange={(v) => { modelValue4.value = v }}
          hideSearch={false}
        />
        <div/><div/><div/><div style="display: flex; justify-content: flex-end;">Size S</div><div/><div/>
        <DefaultSelectMultiple
          {...args }
          items={items}
          modelValue={modelValue1.value}
          onValueChange={(v) => { modelValue1.value = v }}
          size='S'
          title='Заголовок'
        />
        <div class="default-table-header ark-ui-storybook-table-header" style="margin-top: 24px;">
          <DefaultSelectMultiple
            {...args }
            items={items}
            size='S'
            modelValue={modelValue2.value}
            onValueChange={(v) => { modelValue2.value = v }}
            title='Для таблицы'
          />
        </div>
        <DefaultSelectMultiple
          {...args }
          items={items}
          size='S'
          modelValue={modelValue3.value}
          onValueChange={(v) => { modelValue3.value = v }}
          title='Отключен'
          disabled={true}
        />
        <div style="margin-top: 24px;">
          <DefaultSelectMultiple
            {...args }
            items={items}
            size='S'
            modelValue={modelValue4.value}
            onValueChange={(v) => { modelValue4.value = v }}
          />
          <p class="ark-ui-select-title" style="margin-top: 8px;">Без лейбла</p>
        </div>
        <div>
          <DefaultSelectMultiple
            {...args }
            items={itemsShort}
            title='Третьего не дано'
            size='S'
            modelValue={modelValue4.value}
            onValueChange={(v) => { modelValue4.value = v }}
          />
          <p class="ark-ui-select-title" style="margin-top: 8px;">Селект с короткой выпадашкой</p>
        </div>
      </div>
    )
  },
})

export const Primary = Template.bind({})