import React from 'react';
import { SeparateLine } from '../components';
import { mockSeparateLineDashed, mockSeparateLineDotDash, mockSeparateLineDotted, mockSeparateLineDouble, mockSeparateLineGradient, mockSeparateLineNoMSG } from '../../__MOCK__/mockSeparateLine';

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

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

export const SeparateLineDefault = Template.bind({});
SeparateLineDefault.args = {
    data: mockSeparateLineNoMSG
}

export const SeparateLineDefaultTextLong = Template.bind({});
SeparateLineDefaultTextLong.args = {
    // data: mockSeparateLineNoMSG
    data: {
        ...mockSeparateLineNoMSG,
        metaData:{
            ...mockSeparateLineNoMSG.metaData,
            isUseText:1,
            text:'<p><span style="color:#c0392b"><span style="background-color:#f1c40f">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sollicitudin odio, eu suscipit mauris. Donec dolor dolor, vulputate volutpat orci ut, imperdiet volutpat nibh. Quisque volutpat dui vitae velit interdum pellentesque a ut mauris. Praesent ac suscipit massa. Donec congue pellentesque est quis venenatis. Nullam non sem suscipit, pharetra nisi ac, sagittis leo. Vestibulum quis posuere magna. Curabitur vitae hendrerit odio, ac ultricies enim. Ut ornare massa orci, accumsan faucibus nulla pulvinar non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vehicula, neque vitae iaculis volutpat, lorem magna molestie lorem, nec ornare enim turpis quis quam. Duis condimentum diam quis justo suscipit, id consectetur eros consectetur. Nullam nec nibh odio. Aliquam maximus dictum orci at efficitur. Cras fringilla aliquam nisl, vel varius ligula consequat at. Duis nec egestas massa. Nunc ut elit cursus, ultricies orci in, pellentesque elit. Quisque tempor eros erat. Sed molestie magna sed est porttitor, non molestie tortor lacinia. Sed in erat eget odio tempus aliquet. Sed sit amet eros magna. Quisque mollis suscipit lectus, ornare elementum lorem gravida vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum sit amet est viverra, tincidunt diam eu, posuere nisl. Vestibulum varius purus ut elit faucibus, sit amet aliquet elit sodales. Donec rhoncus diam in magna aliquet, a ultrices tellus fringilla. Cras sit amet sapien at augue consectetur porta ac sed quam. Nam molestie massa sit amet arcu ullamcorper faucibus. In lectus velit, gravida ac tempor sed, pellentesque ac leo. Nullam ac pellentesque massa. Nulla facilisi. Proin accumsan dolor sit amet tellus semper varius. Ut sit amet dolor tempus, commodo nisl non, tincidunt sapien. Fusce congue lacus et ipsum sodales efficitur. Curabitur sagittis blandit gravida. Fusce vestibulum elit nec molestie aliquam. Nulla malesuada auctor fringilla. Vivamus at lectus ullamcorper, aliquet purus eget, placerat dui. Sed vel auctor erat. Nunc non diam urna. Donec erat neque, sodales in sollicitudin consectetur, dignissim eget eros. Nullam ut dolor tellus. Aenean efficitur et tellus quis aliquet. Aliquam nec mauris quam. Sed lacinia pharetra sem blandit posuere. Mauris ultrices lectus id lacus tincidunt luctus. Suspendisse potenti. Suspendisse odio ipsum, eleifend vitae iaculis sit amet, rutrum et sem. Suspendisse eu fermentum ante, non semper ligula. Integer nec lacus facilisis, iaculis leo lobortis, auctor velit. Cras convallis rutrum justo, at lobortis dolor. Nullam posuere faucibus quam, id rhoncus metus vestibulum at. Nulla blandit vel felis nec lacinia. Donec vel tincidunt odio, id consequat velit. Aenean id nibh eu nulla hendrerit tincidunt non quis elit. Proin non mattis quam, et eleifend massa. Proin ex eros, vestibulum quis rhoncus eu, vehicula et ipsum. Donec arcu dolor, eleifend ut laoreet quis, dictum at egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut nibh nunc. Nam augue diam, scelerisque et quam in, semper pulvinar erat. Nam eu erat at risus consectetur egestas. Sed fermentum nunc vitae malesuada dapibus. Sed nisl metus, tincidunt rhoncus sapien a, lacinia imperdiet erat. Phasellus semper velit tincidunt, tempus ligula et, viverra ante. Integer molestie risus eget odio posuere ornare. Integer interdum, sapien vitae luctus porta, eros mauris tempor ex, eget imperdiet ligula neque sit amet nibh. Pellentesque vestibulum sapien sem, sed mollis arcu rutrum pellentesque.</span></span></p>',
        },
    }
}

export const SeparateLineDefaultTextLongIsPreview = Template.bind({});
SeparateLineDefaultTextLongIsPreview.args = {
    // data: mockSeparateLineNoMSG
    isPreview:true,
    data: {
        ...mockSeparateLineNoMSG,
        metaData:{
            ...mockSeparateLineNoMSG.metaData,
            isUseText:1,
            text:'<p><span style="color:#c0392b"><span style="background-color:#f1c40f">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id sollicitudin odio, eu suscipit mauris. Donec dolor dolor, vulputate volutpat orci ut, imperdiet volutpat nibh. Quisque volutpat dui vitae velit interdum pellentesque a ut mauris. Praesent ac suscipit massa. Donec congue pellentesque est quis venenatis. Nullam non sem suscipit, pharetra nisi ac, sagittis leo. Vestibulum quis posuere magna. Curabitur vitae hendrerit odio, ac ultricies enim. Ut ornare massa orci, accumsan faucibus nulla pulvinar non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vehicula, neque vitae iaculis volutpat, lorem magna molestie lorem, nec ornare enim turpis quis quam. Duis condimentum diam quis justo suscipit, id consectetur eros consectetur. Nullam nec nibh odio. Aliquam maximus dictum orci at efficitur. Cras fringilla aliquam nisl, vel varius ligula consequat at. Duis nec egestas massa. Nunc ut elit cursus, ultricies orci in, pellentesque elit. Quisque tempor eros erat. Sed molestie magna sed est porttitor, non molestie tortor lacinia. Sed in erat eget odio tempus aliquet. Sed sit amet eros magna. Quisque mollis suscipit lectus, ornare elementum lorem gravida vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum sit amet est viverra, tincidunt diam eu, posuere nisl. Vestibulum varius purus ut elit faucibus, sit amet aliquet elit sodales. Donec rhoncus diam in magna aliquet, a ultrices tellus fringilla. Cras sit amet sapien at augue consectetur porta ac sed quam. Nam molestie massa sit amet arcu ullamcorper faucibus. In lectus velit, gravida ac tempor sed, pellentesque ac leo. Nullam ac pellentesque massa. Nulla facilisi. Proin accumsan dolor sit amet tellus semper varius. Ut sit amet dolor tempus, commodo nisl non, tincidunt sapien. Fusce congue lacus et ipsum sodales efficitur. Curabitur sagittis blandit gravida. Fusce vestibulum elit nec molestie aliquam. Nulla malesuada auctor fringilla. Vivamus at lectus ullamcorper, aliquet purus eget, placerat dui. Sed vel auctor erat. Nunc non diam urna. Donec erat neque, sodales in sollicitudin consectetur, dignissim eget eros. Nullam ut dolor tellus. Aenean efficitur et tellus quis aliquet. Aliquam nec mauris quam. Sed lacinia pharetra sem blandit posuere. Mauris ultrices lectus id lacus tincidunt luctus. Suspendisse potenti. Suspendisse odio ipsum, eleifend vitae iaculis sit amet, rutrum et sem. Suspendisse eu fermentum ante, non semper ligula. Integer nec lacus facilisis, iaculis leo lobortis, auctor velit. Cras convallis rutrum justo, at lobortis dolor. Nullam posuere faucibus quam, id rhoncus metus vestibulum at. Nulla blandit vel felis nec lacinia. Donec vel tincidunt odio, id consequat velit. Aenean id nibh eu nulla hendrerit tincidunt non quis elit. Proin non mattis quam, et eleifend massa. Proin ex eros, vestibulum quis rhoncus eu, vehicula et ipsum. Donec arcu dolor, eleifend ut laoreet quis, dictum at egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut nibh nunc. Nam augue diam, scelerisque et quam in, semper pulvinar erat. Nam eu erat at risus consectetur egestas. Sed fermentum nunc vitae malesuada dapibus. Sed nisl metus, tincidunt rhoncus sapien a, lacinia imperdiet erat. Phasellus semper velit tincidunt, tempus ligula et, viverra ante. Integer molestie risus eget odio posuere ornare. Integer interdum, sapien vitae luctus porta, eros mauris tempor ex, eget imperdiet ligula neque sit amet nibh. Pellentesque vestibulum sapien sem, sed mollis arcu rutrum pellentesque.</span></span></p>',
        },
    }
}

export const SeparateLineDotted = Template.bind({});
SeparateLineDotted.args = {
    // data: mockSeparateLineDotted
    data: {
        ...mockSeparateLineDotted,
        metaData:{
            ...mockSeparateLineDotted.metaData,
            isUseText:1,
            text: `<p style="text-align:center;">
            <span style="color: rgb(0,255,255);">D</span><br>
            <span style="color: rgb(0,255,255);">D</span><br>
            <span style="color: rgb(0,255,255);">D</span><br>
            <span style="color: rgb(0,255,255);">D</span><br>
            <span style="color: rgb(0,255,255);">D</span><br>
            <span style="color: rgb(0,255,255);">D</span><br>
            <span style="color: rgb(0,255,255);">D</span><br>
            <span style="color: rgb(0,255,255);">D</span><br>
            <span style="color: rgb(0,255,255);">D</span><br>
            <span style="color: rgb(0,255,255);">D</span><br>
            <span style="color: rgb(0,255,255);">DD</span><br>
            <span style="color: rgb(0,255,255);">D</span><br>
            </p>`,
        },
    }
}

export const SeparateLineDashedRight = Template.bind({});
SeparateLineDashedRight.args = {
    data: mockSeparateLineDashed
}

export const SeparateLineDashedLeft = Template.bind({});
SeparateLineDashedLeft.args = {
    // data: mockSeparateLineDashed
    data: {
        ...mockSeparateLineDashed,
        metaData:{
            ...mockSeparateLineDashed.metaData,
            isUseText:1,
            text:'Separate Line Gradient Separate Line Gradient',
        },
        style:{
            ...mockSeparateLineDashed.style,
            align:'left',
        },
    }
}

export const SeparateLineDouble = Template.bind({});
SeparateLineDouble.args = {
    data: mockSeparateLineDouble
}

export const SeparateLineDotDash = Template.bind({});
SeparateLineDotDash.args = {
    data: mockSeparateLineDotDash
}

export const SeparateLineGradient = Template.bind({});
SeparateLineGradient.args = {
    // data: mockSeparateLineGradient
    data: {
        ...mockSeparateLineGradient,
        metaData:{
            ...mockSeparateLineGradient.metaData,
            isUseText:1,
            text:'Separate Line Gradient Separate Line Gradient',
        },
    }
}

export const SeparateLineGradientNoMSG = Template.bind({});
SeparateLineGradientNoMSG.args = {
    data: {
        ...mockSeparateLineGradient,
        metaData:{
            ...mockSeparateLineGradient.metaData,
            isUseText:0,
            text:'',
        },
    }
}

export const SeparateLineNone = Template.bind({});
SeparateLineNone.args = {
    data: {}
}