import { ref } from 'vue'
import UploadButton from './upload-button.tsx'
import createApi from '../../stubs/api-generator-file'

export default {
  title: 'The Design system/Buttons/Upload button',
  component: UploadButton,
  tags: ['autodocs'],
  args: {
    isLoading: false,
    label: 'Загрузить файл',
    size: 'M',
    isDisabled: false,
    isFileAvailable: false,
    maxFileSize: undefined,
  },
  argTypes: {
    size: {
      description: 'Вариант размера кнопки',
      options: ['M', 'S'],
      control: { type: 'radio' },
    },
    width: {
      description: 'Кастомный размер кнопки',
      options: ['140px', '170px', '200px'],
      control: { type: 'radio' },
    },
    maxFileSize: {
      control: { type: 'number' },
    },
  },
}

const file = ref(null)
const file2 = ref(null)

const Template = (args) => ({
  props: Object.keys(args),
  render() {
    const api = createApi()

    return (
      <div style="display: flex;">
        <div style="margin-right: 30px; border-radius: 4px;">
          <p style="margin: 0 0 8px; font-size: 12px; line-height: 14px; text-align: center; color: #919497;">
              Размер по умолчанию (M)
          </p>
          <UploadButton
            {...args }
            onUpload={(f) => { file.value = f }}
            file={file.value}
            api={api}
          />
        </div>
        <div style="border-radius: 4px;">
          <p style="margin: 0 0 8px; font-size: 12px; line-height: 14px; text-align: center; color: #919497;">
              Размер S
          </p>
          <UploadButton
            {...args }
            size="S"
            onUpload={(f) => { file2.value = f }}
            file={file2.value}
            api={api}
          />
        </div>
      </div>
    )
  },
})

export const Primary = Template.bind({})