import React from 'react';
import { LayoutContent } from '../components';

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

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

const data = (
    {
        borderRadius,
        borderWidth,
        borderStyle,
        activeTab,
    }
) => {
    return (
        {
            "style": {
                "borderRadius": borderRadius, //0,5,20,1000
                'borderWidth': borderWidth, // 1,2,5,10,16
                "borderColor": "#ff0000",
                "borderStyle": borderStyle, //"none", "solid", "dotted" , "dashed", "dot-dash"
                'activeTab': activeTab, //'color','unsplash','imageUpload'
                'color': {
                    'backgroundColor': '#6d5bf1',
                    'fontColor': '#000000',
                    'opacity': 500
                },
                'unsplash': {
                    'arrange': 'fix',
                    'opacity': '100',
                    'externalUrl': 'https://images.unsplash.com/photo-1527519135413-1e146b552e10?ixid=M3wzODU1MzZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODg0NTg5NDB8&ixlib=rb-4.0.3'
                },
                'imageUpload': {
                    'arrange': 'tile',
                    'image': {
                        'path': 'image/408ebc17004b64e1332345d915066293.jpg',
                        'fileName': '408ebc17004b64e1332345d915066293.jpg'
                    }
                }
            }
        }
    )
}

export const LayoutContentBorderNone = Template.bind({});
LayoutContentBorderNone.args = {
    data: {
        ...data(
            {
                borderRadius: 0,  //0,5,20,1000
                borderWidth: 1,  // 1,2,5,10,16
                borderStyle: 'none',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}

export const LayoutContentBorderSolid = Template.bind({});
LayoutContentBorderSolid.args = {
    data: {
        ...data(
            {
                borderRadius: 0,  //0,5,20,1000
                borderWidth: 1,  // 1,2,5,10,16
                borderStyle: 'solid',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}

export const LayoutContentBorderSolid2Radius5 = Template.bind({});
LayoutContentBorderSolid2Radius5.args = {
    data: {
        ...data(
            {
                borderRadius: 5,  //0,5,20,1000
                borderWidth: 2,  // 1,2,5,10,16
                borderStyle: 'solid',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}

export const LayoutContentBorderDotted = Template.bind({});
LayoutContentBorderDotted.args = {
    data: {
        ...data(
            {
                borderRadius: 0,  //0,5,20,1000
                borderWidth: 1,  // 1,2,5,10,16
                borderStyle: 'dotted',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}
export const LayoutContentBorderDotted16 = Template.bind({});
LayoutContentBorderDotted16.args = {
    data: {
        ...data(
            {
                borderRadius: 0,  //0,5,20,1000
                borderWidth: 16,  // 1,2,5,10,16
                borderStyle: 'dotted',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}

export const LayoutContentBorderDotted2Radius5 = Template.bind({});
LayoutContentBorderDotted2Radius5.args = {
    data: {
        ...data(
            {
                borderRadius: 5,  //0,5,20,1000
                borderWidth: 2,  // 1,2,5,10,16
                borderStyle: 'dotted',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}
export const LayoutContentBorderDotted5Radius5 = Template.bind({});
LayoutContentBorderDotted5Radius5.args = {
    data: {
        ...data(
            {
                borderRadius: 5,  //0,5,20,1000
                borderWidth: 5,  // 1,2,5,10,16
                borderStyle: 'dotted',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}

export const LayoutContentBorderDotted10Radius5 = Template.bind({});
LayoutContentBorderDotted10Radius5.args = {
    data: {
        ...data(
            {
                borderRadius: 5,  //0,5,20,1000
                borderWidth: 10,  // 1,2,5,10,16
                borderStyle: 'dotted',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}
export const LayoutContentBorderDotted16Radius5 = Template.bind({});
LayoutContentBorderDotted16Radius5.args = {
    data: {
        ...data(
            {
                borderRadius: 5,  //0,5,20,1000
                borderWidth: 16,  // 1,2,5,10,16
                borderStyle: 'dotted',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}

export const LayoutContentBorderDashed = Template.bind({});
LayoutContentBorderDashed.args = {
    data: {
        ...data(
            {
                borderRadius: 0,  //0,5,20,1000
                borderWidth: 1,  // 1,2,5,10,16
                borderStyle: 'dashed',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}

export const LayoutContentBorderDashed2Radius5 = Template.bind({});
LayoutContentBorderDashed2Radius5.args = {
    data: {
        ...data(
            {
                borderRadius: 5,  //0,5,20,1000
                borderWidth: 2,  // 1,2,5,10,16
                borderStyle: 'dashed',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}

export const LayoutContentBorderDotDashed = Template.bind({});
LayoutContentBorderDotDashed.args = {
    data: {
        ...data(
            {
                borderRadius: 0,  //0,5,20,1000
                borderWidth: 1,  // 1,2,5,10,16
                borderStyle: 'dot-dash',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}

export const LayoutContentBorderDotDashed2Radius5 = Template.bind({});
LayoutContentBorderDotDashed2Radius5.args = {
    data: {
        ...data(
            {
                borderRadius: 5,  //0,5,20,1000
                borderWidth: 2,  // 1,2,5,10,16
                borderStyle: 'dot-dash',  //"none", "solid", "dotted" , "dashed", "dot-dash"
                activeTab: 'unsplash', //'color','unsplash','imageUpload'
            }
        ),
    },
    isPreview: false,
    children: <div style={{ width: '500px', height: '500px' }} />,
}