import VideoCover from "../components/VideoCover/VideoCover";
import React from "react";

export default {
  title: "page-ui/VideoCover",
  component: VideoCover,
};

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

const mockYoutube = {
  type: "video_youtube",
  metaData: {
    url: "https://youtu.be/jxE7Z0_OGNo?si=WjP5Ny30Arxv_YxJ",
    // url: "https://www.youtube.com/watch?v=a0M_QUS3kC0&ab_channel=Whattheduck",
    // url: 'https://www.youtube.com/watch?v=4mfwn3iW8Hg',
    // url: 'https://youtu.be/NKTya5u4Y3A?si=AaebJ776EDDvI10O',
    // url: 'https://www.youtube.com/watch?v=MRBHGNSXXus&t=1292s',
    // url: 'https://youtube.com/shorts/7lu4ZYq0AOc?si=VE4EJ2Iv-5Ln6ZUy',
    isAutoPlay: 0,
  },
  style: {
    marginTop: 60,
    marginBottom: 60,
    marginLeft: 100,
    marginRight: 100,
    fontColor: "",
    backgroundColor: "",
    css: "",
    borderWidth: 10,
    borderColor: "#ff0000",
    borderStyle: "dot-dash",
    borderRadius: 20,
    align: "center",
    activeTab: "unsplash",
    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",
      },
    },
  },
};

const mockFacebook = {
  type: "video_facebook",
  metaData: {
    // url: 'https://www.facebook.com/watch?v=964159271318207',
    // url: "https://www.facebook.com/watch/?v=3338508372933324", //getไม่ได้
    url: "https://www.facebook.com/thesauruspg/videos/621306903503470",
    // url: "https://www.facebook.com/cozystore.th/videos/823276589500563",

    // url: "https://www.facebook.com/reel/663176752162817?mibextid=F9SUZr",
    // url: "https://fb.watch/nvemUhmZsE",
    isAutoPlay: 0,
  },
  style: {
    marginTop: 60,
    marginBottom: 60,
    marginLeft: 100,
    marginRight: 100,
    fontColor: "",
    backgroundColor: "",
    css: "",
    borderWidth: 10,
    borderColor: "#ff0000",
    borderStyle: "dot-dash",
    borderRadius: 20,
    align: "center",
    activeTab: "unsplash",
    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",
      },
    },
  },
};


const youtube = {
  "type": "video_youtube",
  "metaData": {
    "url": "https://www.youtube.com/watch?v=WmfANJvqlN0&ab_channel=NadaoMusic",
    "isAutoPlay": 0
  },
  "style": {
    "marginLeft": 0,
    "marginBottom": 16,
    "marginRight": 0,
    "fontColor": "",
    "backgroundColor": "",
    "css": "",
    "align": "left",
    "isFullWidth": true,
    "marginTop": 16
  },
  "order": 1,
  "column": 1
}


const facebook = {
  "type": "video_facebook",
  "metaData": {
    "url": "https://fb.watch/nN-VmN9CJt/",
    "isAutoPlay": 0,
    "isFullScreen": 0
  },
  "style": {
    "marginLeft": 0,
    "marginBottom": 16,
    "marginRight": 0,
    "fontColor": "",
    "backgroundColor": "",
    "css": "",
    "align": "left",
    "isFullWidth": true,
    "marginTop": 16
  },
  "order": 5,
  "column": 1
}

export const VideoCoverDefault = Template.bind({});
VideoCoverDefault.args = {
  accessParams: {
    client_id: "828385268184846",
    client_secret: "b62da1dc004afa804935f3f169448db4",
    fb_exchange_token:
      "EAALxaXmltw4BOyozGknAkPZBudEtbBBi8BHM77W5vKXZA86BJZB37Qwsu2d2hPkoO1NrFZCI4DIjmZAEBsjtpaubxuHQJrsTaCO3o5pBeDhht42xJyiWEUmWhVOazkRgPdXL9oWBBFil1ZCZCAoylV8udOE0JvzOmovWYaiW4DQGT9YYZBU0EfPbhWks",
  },
  dataAll: mockFacebook,
  isPreview: false,
};

export const VideoCoverYoutube = Template.bind({});
VideoCoverYoutube.args = {
  dataAll: mockYoutube,
  isPreview: false,
};

export const VideoYoutube = Template.bind({});
VideoYoutube.args = {
  dataAll: youtube,
  isPreview: false,
};
export const VideoFacebook = Template.bind({});
VideoFacebook.args = {
  dataAll: facebook,
  isPreview: false,
};