import { ref } from 'vue'
import UploadArea from './upload-area.vue'
import createApi from '../../stubs/api-generator-file'

export default {
  title: 'The Design system/Buttons/Upload area',
  component: UploadArea,
  tags: ['autodocs'],
  args: {
    label: 'Нажмите или перетащите файл в эту область, чтобы загрузить документ',
    formats: ['.jpg', '.png', '.pdf'],
    isDisabled: false,
    isError: false,
    files: [
      {
        id: '111111',
        name: 'Фотография',
        file: 'https://images.unsplash.com/photo-1627436712699-57a17c974615?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80',
        extension: 'png',
        size: 3266188,
      },
      {
        id: '222222',
        name: 'Изображение',
        file: 'https://images.unsplash.com/photo-1674856320941-7e442d7c4799?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80',
        extension: 'jpg',
        size: 257865,
      },
      {
        id: '333333',
        name: 'Картинка',
        file: 'https://images.unsplash.com/photo-1694383440533-4bd1660c97e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
        extension: 'jpeg',
        size: 257865,
      },
      {
        id: '444444',
        name: 'Документ',
        file: 'https://images.unsplash.com/photo-1674856320941-7e442d7c4799?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80',
        extension: 'pdf',
        size: 38425,
      },
    ],
  },
}

const files = ref([])

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

    return (
      <div>
        <p style="background-color: #F0F1F7; padding: 4px 6px; border-radius: 6px;">
          Upload area
        </p>
        <UploadArea
          {...args}
          onUpload={(filesArray) => { args.files = [...filesArray] }}
          api={api}
          doDeleteRequest={false}
        />
        <p style="margin-top: 70px; background-color: #F0F1F7; padding: 4px 6px; border-radius: 6px;">
          Single upload area
        </p>
        <UploadArea
          {...args}
          api={api}
          files={files.value}
          onUpload={(f) => { files.value = f }}
          isMultiple={false}
        />
        <p style="margin-top: 70px; background-color: #F0F1F7; padding: 4px 6px; border-radius: 6px;">
          Disabled upload area
        </p>
        <UploadArea
          {...args}
          onUpload={(filesArray) => { args.files = [...filesArray] }}
          api={api}
          isDisabled={true}
          doDeleteRequest={false}
        />
        <p style="margin-top: 70px; background-color: #F0F1F7; padding: 4px 6px; border-radius: 6px;">
          Upload area with maximum files
        </p>
        <UploadArea
          {...args}
          onUpload={(filesArray) => { args.files = [...filesArray] }}
          api={api}
          maximumFiles={3}
          doDeleteRequest={false}
        />
      </div>
    )
  },
})

export const Primary = Template.bind({})