import VideoWidget from '../components/VideoWidget/VideoWidget';
import React from 'react';

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

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


const configYoutube = {
  youtube: {
    playerVars: { showinfo: 1 }
  }
}


const mockYoutube = {
  type: "text",
  order: 4,
  column: 1,
  metaData: {
    url: 'https://www.youtube.com/watch?v=a0M_QUS3kC0&ab_channel=Whattheduck',
  },
  style: {
    marginTop: 50,
    marginBottom: 16,
    marginLeft: 16,
    marginRight: 16,
    fontColor: "",
    backgroundColor: "",
    css: "",
    borderWidth: 10,
    borderColor: "#ff0000",
    borderStyle: "dot-dash", //"none", "solid", "dotted" , "dashed", "dot-dash"
    borderRadius: 20,
    align: "right", //'center' || 'left' || 'right'
    activeTab: "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 VideoWidgetCustomYoutube = Template.bind({});
VideoWidgetCustomYoutube.args = {
  config: configYoutube,
  url: 'https://www.youtube.com/watch?v=a0M_QUS3kC0&ab_channel=Whattheduck',
  // url: 'https://fb.watch/eFG2la3H2x/',
  // url: 'https://www.facebook.com/nanny.unloveable/videos/4105085632922108/?fs=e&s=cl',
  // url: '../static/video/video-cat.mp4',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  dataAll: mockYoutube,
  isPreview: false,
  type:'video_youtube',
}

export const VideoWidgetCustomYoutubeAutoPlay = Template.bind({});
VideoWidgetCustomYoutubeAutoPlay.args = {
  config: configYoutube,
  url: 'https://www.youtube.com/watch?v=a0M_QUS3kC0&ab_channel=Whattheduck',
  // url: 'https://fb.watch/eFG2la3H2x/',
  // url: 'https://www.facebook.com/nanny.unloveable/videos/4105085632922108/?fs=e&s=cl',
  // url: '../static/video/video-cat.mp4',
  playing: true,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  dataAll: mockYoutube,
  isPreview: false,
  type:'video_youtube',
}

export const VideoWidgetCustomFBVideos1t1 = Template.bind({});
VideoWidgetCustomFBVideos1t1.args = {
  url: 'https://fb.watch/nN-W3m9yzx/',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginBottom: 0,
  isPreview: false,
  dataAll: mockYoutube,
  type:'video_facebook',
}
export const VideoWidgetCustomFBPortrait = Template.bind({});
VideoWidgetCustomFBPortrait.args = {
  url: 'https://fb.watch/nN-VmN9CJt/',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginBottom: 0,
  isPreview: false,
  dataAll: mockYoutube,
  type:'video_facebook',
}
export const VideoWidgetCustomFBLandscape = Template.bind({});
VideoWidgetCustomFBLandscape.args = {
  url: 'https://fb.watch/nN-ZZGjaQw/',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginBottom: 0,
  isPreview: false,
  dataAll: mockYoutube,
  type:'video_facebook',
}
export const VideoWidgetCustomFBVideos = Template.bind({});
VideoWidgetCustomFBVideos.args = {
  url: 'https://www.facebook.com/watch/?v=3338508372933324',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginBottom: 0,
  isPreview: false,
  dataAll: mockYoutube,
  type:'video_facebook',

}
export const VideoWidgetCustomStatic = Template.bind({});
VideoWidgetCustomStatic.args = {
  url: '../static/video/video-cat.mp4',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginBottom: 0,
  isPreview: false,
  dataAll: mockYoutube,
  
}

export const VideoWidgetMarginBottom = Template.bind({});
VideoWidgetMarginBottom.args = {
  url: '../static/video/video-cat.mp4',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginBottom: 0,
  isPreview: false,
}

export const VideoWidgetMarginLeft = Template.bind({});
VideoWidgetMarginLeft.args = {
  url: '../static/video/video-cat.mp4',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginLeft: 0,
  isPreview: false,
}

export const VideoWidgetMarginRight = Template.bind({});
VideoWidgetMarginRight.args = {
  url: '../static/video/video-cat.mp4',
  playing: false,
  controls: true,
  loop: false,
  muted: false,
  volume: 1,
  light: false,
  width: '100%',
  height: 'auto',
  marginRight: 0,
  isPreview: false,
}