"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.aspectRatio = exports.responsive = exports.contain = exports.cover = exports.lazyLoading = exports.basicImage = void 0;
const react_1 = __importDefault(require("react"));
const test_utilities_1 = require("../../test-utilities");
const TextContainer_1 = require("../TextContainer");
const View_1 = require("../View");
const Image_1 = require("./Image");
const meta = {
    component: Image_1.Image,
    title: 'checkout-web-ui/Image',
    argTypes: {
        source: {
            name: 'source',
            type: { name: 'string', required: true },
            defaultValue: 'https://via.placeholder.com/320x180/eee',
            control: {
                type: 'text',
            },
        },
        description: {
            name: 'description',
            type: { name: 'string', required: false },
            defaultValue: 'placeholder.com',
            control: {
                type: 'text',
            },
        },
        loading: {
            name: 'loading',
            control: {
                type: 'select',
                options: ['eager', 'lazy'],
                required: false,
            },
        },
        fit: {
            name: 'fit',
            control: {
                type: 'select',
                options: ['cover', 'contain'],
                required: false,
            },
        },
    },
};
exports.default = meta;
const Template = (args) => <Image_1.Image {...args}/>;
exports.basicImage = Template.bind({});
exports.lazyLoading = Template.bind({});
exports.lazyLoading.args = {
    loading: 'lazy',
};
exports.cover = Template.bind({});
exports.cover.args = {
    sources: {
        base: [
            { source: 'https://via.placeholder.com/320x180/eee', resolution: 1 },
            { source: 'https://via.placeholder.com/640x360/eee', resolution: 2 },
        ],
    },
    aspectRatio: 1,
    fit: 'cover',
};
exports.cover.decorators = [
    (Story) => (<View_1.View maxInlineSize={256} border="base">
      <Story />
    </View_1.View>),
];
exports.contain = Template.bind({});
exports.contain.args = {
    sources: {
        base: [
            { source: 'https://via.placeholder.com/320x180/eee', resolution: 1 },
            { source: 'https://via.placeholder.com/640x360/eee', resolution: 2 },
        ],
    },
    aspectRatio: 1,
    fit: 'contain',
};
exports.contain.decorators = [
    (Story) => (<View_1.View maxInlineSize={256} border="base">
      <Story />
    </View_1.View>),
];
exports.responsive = Template.bind({});
exports.responsive.args = {
    sources: {
        small: [
            {
                source: 'https://via.placeholder.com/320x180/eee',
                resolution: 1,
            },
            {
                source: 'https://via.placeholder.com/640x360/eee',
                resolution: 2,
            },
        ],
        medium: [
            {
                source: 'https://via.placeholder.com/640x360/eee',
                resolution: 1,
            },
            {
                source: 'https://via.placeholder.com/1280x720/eee',
                resolution: 2,
            },
        ],
        large: [
            {
                source: 'https://via.placeholder.com/1280x720/eee',
                resolution: 1,
            },
            {
                source: 'https://via.placeholder.com/2560x1440/eee',
                resolution: 2,
            },
        ],
    },
};
exports.aspectRatio = (args) => (<div style={{ width: 320 }}>
    <TextContainer_1.TextContainer>
      <Image_1.Image {...args}/>
      <p>{test_utilities_1.faker.lorem.paragraphs(3)}</p>
    </TextContainer_1.TextContainer>
  </div>);
exports.aspectRatio.args = {
    source: 'https://via.placeholder.com/640x360',
    aspectRatio: 3,
};