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

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

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

const items = [
  { id: '1', name: 'Вариант 1' },
  { id: '2', name: 'Вариант 2' },
  { id: '3', name: 'Вариант 3' },
  { id: '4', name: 'Вариант 4' },
  { id: '5', name: 'Вариант 5' },
]

const modelValue1 = ref(undefined)
const modelValue2 = ref(undefined)
const modelValue3 = ref(undefined)
const modelValue4 = ref(undefined)
const modelValue5 = ref(undefined)

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

export const Primary = Template.bind({})