import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';

import type { PlayerEmbedProps } from '.';
import type { Meta, StoryObj } from '@storybook/web-components';

import '.';

type PlayerEmbedArgs = PlayerEmbedProps & {
  showVouch?: boolean;
};

const _PlayerEmbed = ({
  vouchId,
  templateId,
  questions,
  preload,
  autoplay,
  env,
  apiKey,
  controls,
  aspectRatio,
  senderId
}: PlayerEmbedArgs) => {
  return html`
    <div style="height: 100vh">
      <vouch-embed-legacy-player
        env=${ifDefined(env)}
        apiKey=${ifDefined(apiKey)}
        vouchId=${ifDefined(vouchId)}
        templateId=${ifDefined(templateId)}
        .questions=${questions}
        .controls=${controls}
        ?autoplay=${autoplay}
        preload=${ifDefined(preload)}
        aspectRatio=${ifDefined(aspectRatio)}
        senderId=${ifDefined(senderId)}
        @error=${console.log}
      ></vouch-embed-legacy-player>
    </div>
  `;
};

// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
const meta = {
  title: 'Embeds',
  tags: ['autodocs'],
  render: (args) => _PlayerEmbed(args),
  component: 'vouch-embed-legacy-player'
} satisfies Meta<PlayerEmbedProps>;

type Story = StoryObj<PlayerEmbedArgs>;

const Player: Story = {
  args: {
    env: 'dev',
    apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
    vouchId: '6JQEIPeStt',
    templateId: '357fc118-e179-4171-9446-ff2b8e9d1b29',
    questions: [],
    aspectRatio: 0,
    preload: 'none',
    autoplay: false,
    controls: [
      'progress',
      'play-large',
      'navigation',
      'play',
      'volume',
      'current-time',
      'duration',
      'speed',
      'captions',
      'fullscreen',
      'preview',
      'languages'
    ]
  },
  argTypes: {
    env: {
      control: 'radio',
      options: ['local', 'dev', 'staging', 'prod']
    },
    preload: {
      control: 'radio',
      options: ['auto', 'none']
    }
  },
  parameters: {
    layout: 'fullscreen'
  }
};

export default meta;
export { Player };