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 MultiEmbedArgs = PlayerEmbedProps & {
  apiKey1?: string;
  apiKey2?: string;
  apiKey3?: string;
  vouchId1?: string;
  vouchId2?: string;
  vouchId3?: string;
  showVouch?: boolean;
};

const _MultiEmbed = ({
  vouchId1,
  vouchId2,
  vouchId3,
  templateId,
  questions,
  preload,
  autoplay,
  env,
  apiKey1,
  apiKey2,
  apiKey3,
  controls,
  aspectRatio
}: MultiEmbedArgs) => {
  return html`
    <div style="height: 33vh">
      <vouch-embed-legacy-player
        env=${ifDefined(env)}
        apiKey=${ifDefined(apiKey1)}
        vouchId=${ifDefined(vouchId1)}
        templateId=${ifDefined(templateId)}
        .questions=${questions}
        .controls=${controls}
        ?autoplay=${autoplay}
        preload=${ifDefined(preload)}
        aspectRatio=${ifDefined(aspectRatio)}
        @error=${console.log}
      ></vouch-embed-legacy-player>
    </div>
    <div style="height: 33vh">
      <vouch-embed-legacy-player
        env=${ifDefined(env)}
        apiKey=${ifDefined(apiKey2)}
        vouchId=${ifDefined(vouchId2)}
        templateId=${ifDefined(templateId)}
        .questions=${questions}
        .controls=${controls}
        ?autoplay=${autoplay}
        preload=${ifDefined(preload)}
        aspectRatio=${ifDefined(aspectRatio)}
        @error=${console.log}
      ></vouch-embed-legacy-player>
    </div>
    <div style="height: 33vh">
      <vouch-embed-legacy-player
        env=${ifDefined(env)}
        apiKey=${ifDefined(apiKey3)}
        vouchId=${ifDefined(vouchId3)}
        templateId=${ifDefined(templateId)}
        .questions=${questions}
        .controls=${controls}
        ?autoplay=${autoplay}
        preload=${ifDefined(preload)}
        aspectRatio=${ifDefined(aspectRatio)}
        @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) => _MultiEmbed(args),
  component: 'vouch-embed-legacy-player'
} satisfies Meta<PlayerEmbedProps>;

type Story = StoryObj<MultiEmbedArgs>;

const MultiPlayer: Story = {
  args: {
    env: 'dev',
    apiKey1: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
    vouchId1: '6JQEIPeStt',
    apiKey2: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
    vouchId2: '6JQEIPeStt',
    apiKey3: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
    vouchId3: '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 { MultiPlayer };