import React from "react";
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";

import { Stream } from "../src";
import { streamActionProps } from "./actions";

const volumeOptions = {
  range: true,
  min: 0,
  max: 1,
  step: 0.1,
};

const defaultVideo = "644822f93dcddab3e9441587d184ca2f";

export default {
  title: "Basic examples",
  decorators: [withKnobs],
};

export const src = () => {
  return (
    <Stream src={text("src", defaultVideo)} controls {...streamActionProps} />
  );
};

export const fixedDimensions = () => {
  return (
    <Stream
      width="400px"
      height="400px"
      src={defaultVideo}
      controls
      {...streamActionProps}
    />
  );
};

export const muted = () => {
  const muted = boolean("muted", true);

  return (
    <Stream src={defaultVideo} muted={muted} loop {...streamActionProps} />
  );
};

export const volume = () => {
  const volume = number("volume", 1, volumeOptions);

  return (
    <Stream
      src={defaultVideo}
      volume={volume}
      controls
      loop
      {...streamActionProps}
    />
  );
};

export const controls = () => {
  const controls = boolean("controls", true);

  return (
    <Stream
      src={defaultVideo}
      controls={controls}
      loop
      muted
      {...streamActionProps}
    />
  );
};

export const autoplay = () => {
  return (
    <Stream
      src={defaultVideo}
      autoplay
      controls
      loop
      muted
      {...streamActionProps}
    />
  );
};

export const poster = () => {
  const controls = boolean("controls", true);

  const poster = text(
    "poster",
    "https://cloudflarestream.com/644822f93dcddab3e9441587d184ca2f/thumbnails/thumbnail.jpg?time=109s&height=1200"
  );

  return (
    <Stream
      src={defaultVideo}
      controls={controls}
      poster={poster}
      {...streamActionProps}
    />
  );
};

export const adUrl = () => {
  return (
    <Stream
      src={defaultVideo}
      adUrl={text(
        "adUrl",
        "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator="
      )}
      controls
      {...streamActionProps}
    />
  );
};

adUrl.story = {
  decorators: [
    withKnobs({
      // Necessary to prevent adUrl from being escaped
      // https://github.com/storybookjs/storybook/issues/4445
      escapeHTML: false,
    }),
  ],
};