import type { Meta, StoryObj } from '@storybook/vue3-vite'

import CpAirlineLogo from '@/components/CpAirlineLogo.vue'

import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'

const airlineSizes = [16, 24, 32, 48] as const

const meta = {
  title: 'Atoms/CpAirlineLogo',
  component: CpAirlineLogo,
  parameters: {
    docs: {
      description: {
        component:
          'Displays an airline logo fetched from the Kiwi.com CDN using its IATA code. Falls back to a placeholder when the code is unknown.',
      },
    },
  },
  argTypes: {
    iataCode: {
      control: 'text',
      description: 'The IATA airline code (e.g. "LH" for Lufthansa, "BA" for British Airways)',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '1L' },
      },
    },
    size: {
      control: 'number',
      description: 'The size of the logo in pixels',
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: '32' },
      },
    },
  },
} satisfies Meta<typeof CpAirlineLogo>

export default meta

type Story = StoryObj<typeof meta>

type AirlineLogoStoryArgs = NonNullable<Story['args']>

const defaultRender = (args: AirlineLogoStoryArgs) => ({
  components: { CpAirlineLogo },
  setup() {
    return { args }
  },
  template: '<CpAirlineLogo v-bind="args" />',
})

/**
 * Default airline logo. Use the controls to experiment with each prop in
 * isolation.
 */
export const Default: Story = {
  args: {
    iataCode: 'AF',
    size: 32,
  },
  render: defaultRender,
}

/**
 * Logo rendered at the sizes most commonly used across the design system.
 */
export const Sizes: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpAirlineLogo },
    setup() {
      return { airlineSizes, docCellStyle, docLabelStyle, docRowWrapStyle }
    },
    template: `
      <div :style="docRowWrapStyle">
        <div v-for="size in airlineSizes" :key="size" :style="docCellStyle">
          <span :style="docLabelStyle">{{ size }}px</span>
          <CpAirlineLogo iata-code="AF" :size="size" />
        </div>
      </div>
    `,
  }),
}

/**
 * A sample of common airline logos displayed side by side.
 */
export const MultipleAirlines: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpAirlineLogo },
    template: `
      <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
        <CpAirlineLogo iata-code="1L" :size="32" />
        <CpAirlineLogo iata-code="BA" :size="32" />
        <CpAirlineLogo iata-code="EK" :size="32" />
        <CpAirlineLogo iata-code="AA" :size="32" />
        <CpAirlineLogo iata-code="AF" :size="32" />
        <CpAirlineLogo iata-code="KL" :size="32" />
      </div>
    `,
  }),
}

/**
 * With an empty `iataCode`, the component falls back to a neutral
 * placeholder.
 */
export const EmptyIATACode: Story = {
  args: {
    iataCode: '',
    size: 32,
  },
  render: defaultRender,
}