import React from 'react';
import { SmartImageGallery } from '../components';
import { mockSmartImageGallery } from '../../__MOCK__/mockSmartImage';

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

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

export const SmartImageGalleryNoBorderImg = Template.bind({});
SmartImageGalleryNoBorderImg.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 1,
            marginTop: 0,
            marginBottom: 0,
            marginLeft: 0,
            marginRight: 0,
            grid: 1,
            borderStyle: 'none',
            borderWidth: 0,// 1,2,5,10,16
            borderRadius: 0, //0,5,20,1000
            align: 'right', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGalleryBorderDottedImg1 = Template.bind({});
SmartImageGalleryBorderDottedImg1.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 1,
            marginTop: 0,
            marginBottom: 0,
            marginLeft: 0,
            marginRight: 0,
            grid: 2,
            borderStyle: 'dotted', //"none", "solid", "dotted" , "dashed", "dot-dash"
            borderWidth: 5,// 1,2,5,10,16
            borderRadius: 5, //0,5,20,1000
            align: 'right', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}
export const SmartImageGalleryBorderDotDashImg1 = Template.bind({});
SmartImageGalleryBorderDotDashImg1.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 1,
            marginTop: 0,
            marginBottom: 0,
            marginLeft: 0,
            marginRight: 0,
            grid: 1,
            borderStyle: 'dot-dash', //"none", "solid", "dotted" , "dashed", "dot-dash"
            borderWidth: 5,// 1,2,5,10,16
            borderRadius: 5, //0,5,20,1000
            align: '', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGalleryBorderDottedImg2 = Template.bind({});
SmartImageGalleryBorderDottedImg2.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 1,
            marginTop: 0,
            marginBottom: 0,
            marginLeft: 0,
            marginRight: 0,
            grid: 1,
            borderStyle: 'dotted', //"none", "solid", "dotted" , "dashed", "dot-dash"
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 5, //0,5,20,1000
            align: '', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}
export const SmartImageGalleryBorderDotDashImg2 = Template.bind({});
SmartImageGalleryBorderDotDashImg2.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 1,
            marginTop: 0,
            marginBottom: 0,
            marginLeft: 0,
            marginRight: 0,
            grid: 1,
            borderStyle: 'dot-dash', //"none", "solid", "dotted" , "dashed", "dot-dash"
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 5, //0,5,20,1000
            align: '', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery1Img = Template.bind({});
SmartImageGallery1Img.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 1,
            marginTop: 0,
            marginBottom: 0,
            marginLeft: 0,
            marginRight: 0,
            grid: 1,
            borderStyle: 'none',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 20, //0,5,20,1000
            align: '', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery2Img = Template.bind({});
SmartImageGallery2Img.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 2,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 2,
            borderStyle: 'solid',
            borderWidth: 1,// 1,2,5,10,16
            borderRadius: 0, //0,5,20,1000
            align: '', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
    isDisableAction: true
}

export const SmartImageGallery3Img = Template.bind({});
SmartImageGallery3Img.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 3,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 3,
            borderStyle: 'dotted',
            borderWidth: 2,// 1,2,5,10,16
            borderRadius: 5, //0,5,20,1000
            align: '', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery4Img = Template.bind({});
SmartImageGallery4Img.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 4,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 4,
            borderStyle: 'dashed',
            borderWidth: 5,// 1,2,5,10,16
            borderRadius: 20, //0,5,20,1000
            align: '', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery5Img = Template.bind({});
SmartImageGallery5Img.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 5,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 5,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 20, //0,5,20,1000
            align: '', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery6Img = Template.bind({});
SmartImageGallery6Img.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 6,
            marginTop: 0,
            marginBottom: 0,
            marginLeft: 0,
            marginRight: 0,
            grid: 6,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 0, //0,5,20,1000
            align: '', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery6Img1GridAlignCenter = Template.bind({});
SmartImageGallery6Img1GridAlignCenter.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 6,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 1,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 5, //0,5,20,1000
            align: 'center', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery6Img2GridAlignCenter = Template.bind({});
SmartImageGallery6Img2GridAlignCenter.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 6,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 2,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 20, //0,5,20,1000
            align: 'center', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery6Img3GridAlignCenter = Template.bind({});
SmartImageGallery6Img3GridAlignCenter.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 6,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 3,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 1000, //0,5,20,1000
            align: 'center', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery6Img4GridAlignCenter = Template.bind({});
SmartImageGallery6Img4GridAlignCenter.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 6,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 4,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 1000, //0,5,20,1000
            align: 'center', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery6Img5GridAlignCenter = Template.bind({});
SmartImageGallery6Img5GridAlignCenter.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 6,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 5,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 1000, //0,5,20,1000
            align: 'center', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery7Img6GridAlignCenter = Template.bind({});
SmartImageGallery7Img6GridAlignCenter.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 7,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 6,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 1000, //0,5,20,1000
            align: 'center', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery8Img6GridAlignCenter = Template.bind({});
SmartImageGallery8Img6GridAlignCenter.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 8,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 6,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 1000, //0,5,20,1000
            align: 'center', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery8Img6GridAlignLeft = Template.bind({});
SmartImageGallery8Img6GridAlignLeft.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 8,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 6,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 1000, //0,5,20,1000
            align: 'left', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery8Img6GridAlignRight = Template.bind({});
SmartImageGallery8Img6GridAlignRight.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 8,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 6,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 1000, //0,5,20,1000
            align: 'right', //'center' || 'left' || 'right'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

export const SmartImageGallery8Img6GridAlignCenterBgImgUpload = Template.bind({});
SmartImageGallery8Img6GridAlignCenterBgImgUpload.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 8,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 6,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 1000, //0,5,20,1000
            align: 'center', //'center' || 'left' || 'right'
            activeTab: 'imageUpload', //'color','unsplash','imageUpload'
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

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

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

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

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

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

export const SmartImageGallery8Img6GridAlignCenterBgImgUnsplashArrangeFixDotdash = Template.bind({});
SmartImageGallery8Img6GridAlignCenterBgImgUnsplashArrangeFixDotdash.args = {
    data: mockSmartImageGallery(
        {
            lengthImg: 7,
            marginTop: 50,
            marginBottom: 50,
            marginLeft: 50,
            marginRight: 50,
            grid: 6,
            borderStyle: 'dot-dash',
            borderWidth: 16,// 1,2,5,10,16
            borderRadius: 1000, //0,5,20,1000
            align: 'center', //'center' || 'left' || 'right'
            activeTab: 'unsplash', //'color','unsplash','imageUpload'
            arrange: 'fix' //'fill', 'tile','fix
        }
    ),
    callbackIndex: (indexImg) => { console.log(indexImg) },
}

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

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

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

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