import {
  componentName,
  ThirdPartyAppLogoClass,
} from '../src/components/descope-third-party-app-logo/ThirdPartyAppLogoClass';
import { LogoClass } from '../src/components/descope-logo';
import { sizeControl } from './commonControls';
// images generated by https://via.assets.so/img.jpg?w=150&h=200&tc=red&bg=blue
import img150x200 from './images/150x200.jpg';
import img800x150 from './images/800x150.jpg';

const Template = ({ size, thirdPartyAppLogoUrl, companyLogoUrl }) => `
<style nonce="${window.DESCOPE_NONCE}">
  descope-third-party-app-logo {
    ${companyLogoUrl ? `${LogoClass.cssVarList.url}: url('${companyLogoUrl}');` : ''}
    ${
      thirdPartyAppLogoUrl
        ? `${ThirdPartyAppLogoClass.cssVarList.thirdPartyAppLogo}: url('${thirdPartyAppLogoUrl}');`
        : ''
    }
  }
</style>

<descope-third-party-app-logo
    size="${size}"
  ></descope-third-party-app-logo
`;

export default {
  component: componentName,
  title: 'descope-third-party-app-logo',
  argTypes: {
    ...sizeControl,
  },
};

export const Default = Template.bind({});

Default.args = {
  thirdPartyAppLogoUrl: img800x150,
  companyLogoUrl: img150x200,
  size: 'md',
};
