export default {
  title: "QuoteCard",
  decorators: [withAngularJs("myApp")],
};

export const simpleTemplate = () => `
  <quote-card author="'Me'">
    It works with a simple template!
  </quote-card>
`;

import { withKnobs, text } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";

import { html, withAngularJs } from "storybook-addon-angularjs";

class MockedAppService {
  constructor() {
    this.message = "Mocked message";
  }
}

function mockLoggingService($log) {
  return {
    log: function(message) {
      $log.log(message);
    },
  }
}

export default {
  title: "QuoteCard",
  decorators: [withKnobs, withAngularJs /* OR */ withAngularJs("myApp")],
  parameters: {
    ng: {
      module: "myApp", // optional when provided in the decorator
      hooks: {
        beforeCompile() {
          // called once before compiling the the component
        },
        beforeUpdate(SomeService) {
          // called before updating the component with new props
          SomeService.setValue("Hi!");
        },
      },
      mock: {
        // When the app depends on modules which cannot be provided in the story you can mock them
        modules: ["some.external.module"],
        // You can mock / override constants here
        constants: {
          API_URL: "https://example.com",
        },
        // You can mock / override services here (dependency injection also works)
        services: {
          AppService: MockedAppService,
        },
        // You can mock / override factories here (dependency injection also works)
        factories: {
          LoggingService: mockLoggingService,
        },
      }
    },
  },
};

export const fancyTemplate = () => {
  const content = text("Content", "It works with a fancy tagged template string!");
  const author = text("Author", "Me");
  const onEvt = action("clicked");

  return html`
    <quote-card author="${author}" on-click="${onEvt}(foo)">
      {{${content}}}
    </quote-card>
  `;
};