import BmsInputFile from './BmsInputFile.vue';
import { within } from 'storybook/test';
import { base64StringToBlob } from 'blob-util';
import { ref } from 'vue';

import template from '@/documentation/template_field_dependency.mdx';

export default {
  title: 'Composants/form/InputFile',
  component: BmsInputFile,
  parameters: {
    docs: {
      page: template,
    },
  },
};

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    BmsInputFile,
  },
  template: `
  <BmsInputFile v-bind="args"/>
  <br/>
  <BmsInputFile v-bind="{...args, small:true}"/>`,
});

export const Empty = Template.bind({});
Empty.args = {
  label: 'My label',
  required: true,
  modelValue: [],
  helperText: 'this is help',
  captions: ['Caption Text'],
  limit: 1,
};

export const WithFiles = Template.bind({});
WithFiles.args = {
  label: 'My label',
  limit: 1,
  modelValue: [
    {
      name: 'Name of a file',
      type: 'noType',
    },
    {
      name: 'Name of a second file',
      type: 'noType',
    },
  ],
};

export const Hover = {
  args: {
    label: 'My label',
    limit: 1,
    modelValue: [],
  },

  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await canvas
      .getByTestId('file-upload-drop-area')
      .classList.add('file-upload__drop-area__hover');
  },
};

export const Active = {
  args: {
    label: 'My label',
    limit: 1,
    modelValue: [],
  },

  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await canvas
      .getByTestId('file-upload-drop-area')
      .classList.add('file-upload__drop-area__active');
  },
};

export const Disabled = Template.bind({});
Disabled.args = {
  label: 'My label',
  required: true,
  helperText: 'this is help',
  captions: ['Caption Text'],
  limit: 1,
  modelValue: [],
  disabled: true,
};

export const Error = Template.bind({});
Error.args = {
  label: 'My label',
  required: true,
  modelValue: [],
  helperText: 'this is help',
  errors: ['Error 1', 'Error 2'],
  limit: 1,
};

export const WithImage = Template.bind({});
WithImage.args = {
  label: 'My label',
  required: true,
  modelValue: [
    new File(
      [
        base64StringToBlob(
          'iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==',
          'image/png',
        ),
      ],
      'image.png',
      { type: 'image/png' },
    ),
  ],
  helperText: 'this is help',
  errors: [],
  limit: 1,
};

export const WideEmpty = Template.bind({});
WideEmpty.args = {
  label: 'My label',
  required: true,
  modelValue: [],
  helperText: 'this is help',
  captions: ['Caption Text'],
  limit: 1,
  wide: true,
};

export const WideWithImage = Template.bind({});
WideWithImage.args = {
  label: 'My label',
  required: true,
  modelValue: [
    new File(
      [
        base64StringToBlob(
          'iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==',
          'image/png',
        ),
      ],
      'image.png',
      { type: 'image/png' },
    ),
  ],
  helperText: 'this is help',
  errors: [],
  limit: 1,
  wide: true,
};

// Simple template for documentation (without small variant)
const SimpleTemplate = (args) => ({
  setup() {
    const modelValue = ref(args.modelValue || []);
    return { args, modelValue };
  },
  components: {
    BmsInputFile,
  },
  template: `
  <BmsInputFile v-bind="args" v-model="modelValue" />
  `,
});

// Playground with default values for documentation
export const PlaygroundInputFile = SimpleTemplate.bind({});
PlaygroundInputFile.parameters = { chromatic: { disable: true } };
PlaygroundInputFile.args = {
  label: 'Upload file',
  modelValue: [],
  limit: 10,
};

// Do: Input file with clear label
export const DoWithClearLabel = SimpleTemplate.bind({});
DoWithClearLabel.parameters = { chromatic: { disable: true } };
DoWithClearLabel.args = {
  label: 'Upload document',
  modelValue: [],
  limit: 10,
};

// Do: Input file with caption
export const DoWithCaption = SimpleTemplate.bind({});
DoWithCaption.parameters = { chromatic: { disable: true } };
DoWithCaption.args = {
  label: 'Upload image',
  modelValue: [],
  captions: ['Maximum file size: 10MB'],
  limit: 10,
};

// Do: Input file with accept filter
export const DoWithAcceptFilter = SimpleTemplate.bind({});
DoWithAcceptFilter.parameters = { chromatic: { disable: true } };
DoWithAcceptFilter.args = {
  label: 'Upload image',
  modelValue: [],
  accept: 'image/*',
  captions: ['Only image files are allowed'],
  limit: 10,
};

// Do: Disabled state
export const DoDisabled = SimpleTemplate.bind({});
DoDisabled.parameters = { chromatic: { disable: true } };
DoDisabled.args = {
  label: 'Upload file',
  modelValue: [],
  disabled: true,
  limit: 10,
};

// Do: Input file with error feedback
export const DoWithErrorFeedback = SimpleTemplate.bind({});
DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
DoWithErrorFeedback.args = {
  label: 'Upload file',
  modelValue: [],
  errors: ['Please upload a file'],
  limit: 10,
};

// Don't: Missing label
export const DontNoLabel = SimpleTemplate.bind({});
DontNoLabel.parameters = { chromatic: { disable: true } };
DontNoLabel.args = {
  modelValue: [],
  limit: 10,
};

export const DoWithLabel = SimpleTemplate.bind({});
DoWithLabel.parameters = { chromatic: { disable: true } };
DoWithLabel.args = {
  label: 'Upload file',
  modelValue: [],
  limit: 10,
};

// Don't: No error feedback
export const DontNoErrorFeedback = SimpleTemplate.bind({});
DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
DontNoErrorFeedback.args = {
  label: 'Upload file',
  modelValue: [],
  limit: 10,
};

// Don't: No caption for file requirements
export const DontNoCaption = SimpleTemplate.bind({});
DontNoCaption.parameters = { chromatic: { disable: true } };
DontNoCaption.args = {
  label: 'Upload file',
  modelValue: [],
  limit: 5,
};
