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

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

import '.';

type DialogEmbedArgs = DialogEmbedProps & {
  showVouch?: boolean;
};

const _DialogEmbed = ({
  vouchId,
  templateId,
  questions,
  preload,
  autoplay,
  env,
  apiKey,
  controls,
  aspectRatio
}: DialogEmbedArgs) => {
  return html`
    <div style="padding: 20px;">
      <vouch-embed-legacy-dialog
        env=${ifDefined(env)}
        apiKey=${ifDefined(apiKey)}
        vouchId=${ifDefined(vouchId)}
        templateId=${ifDefined(templateId)}
        .questions=${questions}
        .controls=${controls}
        ?autoplay=${autoplay}
        preload=${ifDefined(preload)}
        aspectRatio=${ifDefined(aspectRatio)}
        @error=${console.log}
      ></vouch-embed-legacy-dialog>
      <vouch-embed-legacy-dialog
        env=${ifDefined(env)}
        apiKey=${ifDefined(apiKey)}
        vouchId=${ifDefined(vouchId)}
        templateId=${ifDefined(templateId)}
        .questions=${questions}
        .controls=${controls}
        ?autoplay=${autoplay}
        preload=${ifDefined(preload)}
        aspectRatio=${ifDefined(aspectRatio)}
        @error=${console.log}
      ></vouch-embed-legacy-dialog>
    </div>
  `;
};

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

type Story = StoryObj<DialogEmbedArgs>;

const Dialog: Story = {
  args: {
    env: 'dev',
    apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
    vouchId: '6JQEIPeStt',
    templateId: '357fc118-e179-4171-9446-ff2b8e9d1b29',
    questions: [],
    aspectRatio: 0,
    preload: 'none',
    autoplay: false
  },
  argTypes: {
    env: {
      control: 'radio',
      options: ['local', 'dev', 'staging', 'prod']
    },
    preload: {
      control: 'radio',
      options: ['auto', 'none']
    }
  },
  parameters: {
    layout: 'fullscreen'
  }
};

export default meta;
export { Dialog };