export default {
  name: "Video",
  acceptsChildren: false,
  category: "Basic",
  props: [
    {
      label: "src",
      name: "src",
      type: { kind: "text", isDynamic: true },
      required: true,
      default: "",
      placeholder: "enter a url to an video",
      help: "The video to play",
    },
    {
      label: "Poster",
      name: "poster",
      type: { kind: "image", isDynamic: true },
      isDefault: true,
      default: "",
      placeholder: "enter a url to an image",
      help: "The video poster image to show",
    },
    {
      label: "Autoplay",
      name: "autoPlay",
      type: { kind: "boolean" },
      isDefault: true,
      default: false,
      placeholder: null,
      help: "Whether the video should autoplay",
    },
    {
      label: "Controls",
      name: "controls",
      type: { kind: "boolean" },
      isDefault: true,
      default: true,
      placeholder: null,
      help: "Whether the video should display controls",
    },
    {
      label: "Loop",
      name: "loop",
      type: { kind: "boolean" },
      isDefault: true,
      default: false,
      placeholder: null,
      help: "Whether the video should loop",
    },
    {
      label: "Muted",
      name: "muted",
      type: { kind: "boolean" },
      isDefault: true,
      default: false,
      placeholder: null,
      help: "Whether the video should be muted",
    },
    {
      label: "Plays inline",
      name: "playsInline",
      type: { kind: "boolean" },
      isDefault: true,
      default: false,
      placeholder: null,
      help: "Whether the video should be played inline or fullscreen",
    },
  ],
  events: [
    {
      label: "When played",
      name: "onPlay",
      help: "Select an action to run when video is played",
    },
    {
      label: "When paused",
      name: "onPause",
      help: "Select an action to run when video is paused",
    },
    {
      label: "When ended",
      name: "onEnded",
      help: "Select an action to run when video is ended",
    },
  ],
  defaultStyles: {
    "": {
      display: "flex",
      "max-width": "100%",
    },
  },
  sources: [
    {
      id: "isPlaying",
      name: "{{= it.component.name }}'s is playing",
      provider: "StateProvider",
      description: "The current value of the input",
      template: "$get('{{= it.component.id}}', { isPlaying: false }).isPlaying",
      instanceTemplate: `{{= it.component.name }} is playing`,
      outputType: { kind: "boolean" },
    },
  ],
  actions: [
    {
      id: "play",
      name: `Play "{{= it.component.name }}" video`,
      description: "Play the video",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        `document.querySelector('[data-id|="{{= it.component.id }}"]')?.play();`,
      instanceTemplate: ``,
      props: [],
    },
    {
      id: "pause",
      name: `Pause "{{= it.component.name }}" video`,
      description: "Pause the video",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        `document.querySelector('[data-id|="{{= it.component.id }}"]')?.pause();`,
      instanceTemplate: ``,
      props: [],
    },
  ],
} as const;