import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
import { boolean, text, number, select } from '@storybook/addon-knobs';
import ChecImageManager from '../../components/ChecImageManager.vue';
import ImageBlock from '@/components/ChecImageManager/ImageBlock.vue';

<Meta title="Form fields/Image manager" component={ChecImageManager} />

# Image manager

<Props of={ChecImageManager} />

<Preview>
  <Story name="Default">
    {{
      components: {
        ChecImageManager,
      },
      data() {
        return {
          files: [
            {
              id: 'ast_123',
              name: 'Big Murray',
              thumb: 'https://www.fillmurray.com/640/640',
              size: 12000,
            },
            {
              id: 'ast_456',
              name: 'Smol Murray',
              thumb: 'https://www.fillmurray.com/640/480',
              size: 7902,
            }
          ],
        };
      },
      props: {
        endpoint: {
          default: text('endpoint', 'https://httpbin.org/post'),
        },
        columns: {
          default: select('Columns', [2, 4, 6], 4),
        },
      },
      computed: {
        existingImages() {
          return [
            {
              id: 'ast_789',
              name: 'Wide Murray',
              thumb: 'https://www.fillmurray.com/1200/500',
              size: 12000,
            },
            {
              id: 'ast_0ab',
              name: 'Thin Murray',
              thumb: 'https://www.fillmurray.com/400/1155',
              size: 7902,
            }
          ]
        }
      },
      methods: {
        change(files) {
          action('change')(files);
        },
        dropzoneEvent(eventName, ...args) {
          action('dropzone-event')(eventName, args);
        },
        reorder(files) {
          this.files = files.reduce((acc, file) => ({
            ...acc,
            [file.upload.uuid]: file,
          }), {});
        }
      },
      template: `
        <div class="p-16 flex justify-center max-w-6xl mx-auto w-full h-full bg-white py-20">
          <ChecImageManager
            footnote="PNG, JPG, & GIFS accepted"
            v-model="files"
            :columns="columns"
            :image-gallery="existingImages"
            :endpoint="endpoint"
            @reorder="reorder"
            @dropzone-event="dropzoneEvent"
            @change="change"
          />
        </div>`
    }}
  </Story>
</Preview>

## Image block

<Props of={ImageBlock} />

<Preview>
  <Story name="Image block">
    {{
      components: {
        ImageBlock,
      },
      props: {
        index: {
          default: number('index', 1),
        },
        thumb: {
          default: text('Thumbnail', 'https://www.fillmurray.com/640/640')
        },
        progress: {
          default: number('Loading percentage', 100, { range: true, min: 0, max: 100, step: 1 }),
        },
        error: {
          default: text('Error message', ''),
        },
        addAdditionalOptions: {
          default: boolean('Add more options', false),
        },
      },
      data() {
        return {
          moreOptions: [
            {
              key: 'edit',
              name: 'Edit',
            },
            {
              key: 'link-variant',
              name: 'Link to variant',
            },
          ],
        };
      },
      methods: {
        handleClick: action('click'),
        handleDelete: action('delete'),
        handleOption: action('option-clicked'),
      },
      template: `
        <ImageBlock
          class="mx-auto w-1/4 mt-2"
          :index="index"
          :image-options="addAdditionalOptions ? moreOptions : []"
          :thumbnail="thumb"
          :loading="progress < 100"
          :progress="progress"
          :error="error.length > 0"
          :error-message="error"
          @click="handleClick"
          @remove="handleDelete"
          @option-selected="handleOption"
        />
      `,
    }}
  </Story>
</Preview>