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",
      // 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",
      },
    },
  },
};

export const VideoCoverDefault = Template.bind({});
VideoCoverDefault.args = {
  accessParams: {
    client_id: "257769453915585",
    client_secret: "5ccf8f28f06e2efb52ae57ab8e631e0c",
    fb_exchange_token:
      "EAADqcKC8DcEBOwIc2LGZALpbuf9gBJ4X2PgHmNVaUMeM2WGSqWx360Bw1dbrXCAvVbq5K8272ETHKBUxG767IMCRRtHXajbZB4HA6fhSIeZBm16hUMGd2eIn74ZCen6QyaqeVpF1m0c69ZBdh2R1SmXZCq0i0ZCjnr2S4SucDav29voxrntYeQpck4d9SKXp2ZBrp0IXelHi4iMe7cu6ySGtmtyhIzqaGGHLcSJwFDHroABB6ebnZBadrEZCkDRyZCHmn8Y9UiXCAvwJCMZD",
  },
  dataAll: mockFacebook,
};

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