import React from 'react';
import { SmartImageWidget } from '../components';
import { mockSmartImage, mockSmartImageGallery, mockSmartImageSlide } from '../../__MOCK__/mockSmartImage';

export default {
    title: 'page-ui/SmartImageWidget',
    component: SmartImageWidget,
};

const Template = (args) => <SmartImageWidget  {...args} />;

export const SmartImageWidgetTypeImage = Template.bind({});
SmartImageWidgetTypeImage.args = {
    data: mockSmartImage,
    isPreview: false,
    theme: { primary: "#ff0000" },
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageWidgetTypeSlide = Template.bind({});
SmartImageWidgetTypeSlide.args = {
    data: {
        ...mockSmartImageSlide,
        metaData: {
            ...mockSmartImageSlide.metaData,
            images: [
                ...mockSmartImageSlide.metaData.images,
                ...mockSmartImageSlide.metaData.images,
                ...mockSmartImageSlide.metaData.images,
                ...mockSmartImageSlide.metaData.images,
            ]
        }
    },
    isPreview: false,
    theme: { primary: "#ff0000" },
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageWidgetTypeSlideNoTheme = Template.bind({});
SmartImageWidgetTypeSlideNoTheme.args = {
    data: {
        ...mockSmartImageSlide,
        metaData: {
            ...mockSmartImageSlide.metaData,
            images: [
                ...mockSmartImageSlide.metaData.images,
                ...mockSmartImageSlide.metaData.images,
                ...mockSmartImageSlide.metaData.images,
                ...mockSmartImageSlide.metaData.images,
            ]
        }
    },
    isPreview: false,
    // theme: { primary: "#ff0000" },
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageWidgetTypeGallery = Template.bind({});
SmartImageWidgetTypeGallery.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 8,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 6,
            borderStyle: 'dotted',//"none", "solid", "dotted" , "dashed", "dot-dash"
            borderWidth: 10,// 1,2,5,10,16
            borderRadius: 500, //0,5,20,1000
            align: 'right', //'center' || 'left' || 'right'
            activeTab: 'unsplash', //'color','unsplash','imageUpload'
            arrange: 'fix' //'fill', 'tile','fix
        }
    ),
    isPreview: false,
    theme: { primary: "#ff0000" },
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageWidgetTypeImageIsPreview = Template.bind({});
SmartImageWidgetTypeImageIsPreview.args = {
    data: mockSmartImage,
    isPreview: true,
    theme: { primary: "#ff0000" },
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageWidgetTypeSlideIsPreview = Template.bind({});
SmartImageWidgetTypeSlideIsPreview.args = {
    data: {
        ...mockSmartImageSlide,
        metaData: {
            ...mockSmartImageSlide.metaData,
            images: [
                ...mockSmartImageSlide.metaData.images,
                ...mockSmartImageSlide.metaData.images,
                ...mockSmartImageSlide.metaData.images,
                ...mockSmartImageSlide.metaData.images,
            ]
        }
    },
    isPreview: true,
    theme: { primary: "#ff0000" },
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageWidgetTypeGalleryIsPreview = Template.bind({});
SmartImageWidgetTypeGalleryIsPreview.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 8,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 6,
            borderStyle: 'dotted',//"none", "solid", "dotted" , "dashed", "dot-dash"
            borderWidth: 10,// 1,2,5,10,16
            borderRadius: 500, //0,5,20,1000
            align: 'right', //'center' || 'left' || 'right'
            activeTab: 'unsplash', //'color','unsplash','imageUpload'
            arrange: 'fix' //'fill', 'tile','fix
        }
    ),
    isPreview: true,
    theme: { primary: "#ff0000" },
    callbackIndex: (indexImg) => { console.log(indexImg) },
}






/* ---------------- None data ---------------- */

export const SmartImageWidgetImageNoneData = Template.bind({});
SmartImageWidgetImageNoneData.args = {
    data: { metaData: { subType: 'image' } },
    isPreview: false,
    theme: { primary: "#ff0000" },
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageWidgetSlideNoneData = Template.bind({});
SmartImageWidgetSlideNoneData.args = {
    data: { metaData: { subType: 'slide' } },
    isPreview: false,
    theme: { primary: "#ff0000" },
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageWidgetGalleryNoneData = Template.bind({});
SmartImageWidgetGalleryNoneData.args = {
    data: { metaData: { subType: 'gallery' } },
    isPreview: false,
    theme: { primary: "#ff0000" },
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

/* ---------------- None data ---------------- */