import type { Meta, StoryObj } from '@storybook/vue3';
import { ref } from 'vue';
import TitanImageUpload from './TitanImageUpload.vue';

const meta = {
  component: TitanImageUpload,
  title: 'UI/TitanImageUpload',
  tags: ['autodocs'],
  argTypes: {
    modelValue: {
      control: false,
      description: 'The uploaded file (v-model)',
      table: {
        type: { summary: 'File | null' },
      },
    },
    accept: {
      control: 'text',
      description: 'Accepted file types (MIME types)',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'image/*' },
      },
    },
    maxSize: {
      control: 'number',
      description: 'Maximum file size in bytes',
      table: {
        type: { summary: 'number' },
      },
    },
    maxWidth: {
      control: 'number',
      description: 'Maximum image width in pixels',
      table: {
        type: { summary: 'number' },
      },
    },
    maxHeight: {
      control: 'number',
      description: 'Maximum image height in pixels',
      table: {
        type: { summary: 'number' },
      },
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the upload is disabled',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    required: {
      control: 'boolean',
      description: 'Whether the upload is required',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    error: {
      control: 'boolean',
      description: 'Whether the upload has an error state',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      },
    },
    errorMessage: {
      control: 'text',
      description: 'Error message to display',
      table: {
        type: { summary: 'string' },
      },
    },
    label: {
      control: 'text',
      description: 'Heading text above the upload area',
      table: {
        type: { summary: 'string' },
      },
    },
    dragText: {
      control: 'text',
      description: 'Text shown in the drag area',
      table: {
        type: { summary: 'string' },
      },
    },
    buttonText: {
      control: 'text',
      description: 'Text shown on the select file button',
      table: {
        type: { summary: 'string' },
      },
    },
  },
} satisfies Meta<typeof TitanImageUpload>;

export default meta;
type Story = StoryObj<typeof meta>;

/**
 * Default image upload component with drag-and-drop support.
 */
export const Default: Story = {
  render: (args) => ({
    components: { TitanImageUpload },
    setup() {
      const file = ref<File | null>(null);
      return { args, file };
    },
    template: '<TitanImageUpload v-bind="args" v-model="file" />',
  }),
  args: {
    label: 'Upload Photo',
  },
};

/**
 * Image upload with custom text labels.
 */
export const CustomLabels: Story = {
  render: (args) => ({
    components: { TitanImageUpload },
    setup() {
      const file = ref<File | null>(null);
      return { args, file };
    },
    template: '<TitanImageUpload v-bind="args" v-model="file" />',
  }),
  args: {
    label: 'Memorial Photo',
    dragText: 'Drop your photo here',
    buttonText: 'Choose Photo',
  },
};

/**
 * Image upload with file size limit.
 */
export const WithSizeLimit: Story = {
  render: (args) => ({
    components: { TitanImageUpload },
    setup() {
      const file = ref<File | null>(null);
      return { args, file };
    },
    template: '<TitanImageUpload v-bind="args" v-model="file" />',
  }),
  args: {
    label: 'Upload Photo (Max 2MB)',
    maxSize: 2 * 1024 * 1024, // 2MB
  },
};

/**
 * Image upload with dimension constraints.
 */
export const WithDimensionLimit: Story = {
  render: (args) => ({
    components: { TitanImageUpload },
    setup() {
      const file = ref<File | null>(null);
      return { args, file };
    },
    template: '<TitanImageUpload v-bind="args" v-model="file" />',
  }),
  args: {
    label: 'Upload Photo (Max 1920x1080)',
    maxWidth: 1920,
    maxHeight: 1080,
  },
};

/**
 * Required upload field.
 */
export const Required: Story = {
  render: (args) => ({
    components: { TitanImageUpload },
    setup() {
      const file = ref<File | null>(null);
      return { args, file };
    },
    template: '<TitanImageUpload v-bind="args" v-model="file" />',
  }),
  args: {
    label: 'Upload Photo *',
    required: true,
  },
};

/**
 * Image upload with error state.
 */
export const WithError: Story = {
  render: (args) => ({
    components: { TitanImageUpload },
    setup() {
      const file = ref<File | null>(null);
      return { args, file };
    },
    template: '<TitanImageUpload v-bind="args" v-model="file" />',
  }),
  args: {
    label: 'Upload Photo',
    error: true,
    errorMessage: 'File size exceeds the maximum limit',
    required: true,
  },
};

/**
 * Disabled upload field.
 */
export const Disabled: Story = {
  render: (args) => ({
    components: { TitanImageUpload },
    setup() {
      const file = ref<File | null>(null);
      return { args, file };
    },
    template: '<TitanImageUpload v-bind="args" v-model="file" />',
  }),
  args: {
    label: 'Upload Disabled',
    disabled: true,
  },
};

/**
 * Image upload with specific file type restrictions.
 */
export const RestrictedFileTypes: Story = {
  render: (args) => ({
    components: { TitanImageUpload },
    setup() {
      const file = ref<File | null>(null);
      return { args, file };
    },
    template: '<TitanImageUpload v-bind="args" v-model="file" />',
  }),
  args: {
    label: 'Upload Photo (JPG/PNG only)',
    accept: 'image/jpeg,image/png',
  },
};

/**
 * Interactive playground for all image upload props.
 */
export const Playground: Story = {
  render: (args) => ({
    components: { TitanImageUpload },
    setup() {
      const file = ref<File | null>(null);
      return { args, file };
    },
    template: '<TitanImageUpload v-bind="args" v-model="file" />',
  }),
  args: {
    label: 'Upload Photo',
    disabled: false,
    required: false,
    error: false,
  },
};