import { Meta, StoryObj } from '@storybook/react-webpack5';

import Body from '../body';
import Title from '../title';

import Container from './Container';
import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';

export default {
  component: Container,
  title: 'Layout/Container',
  tags: ['early-access'],
  argTypes: {
    size: {
      control: 'radio',
      options: ['fluid', 'standard', 'narrow', 'compact'],
    },
    as: { control: 'text' },
    className: { table: { category: 'Common' } },
  },
  args: {
    size: 'standard',
    as: undefined,
    className: undefined,
  },
  parameters: {
    docs: { toc: true },
    padding: '0',
  },
} satisfies Meta<typeof Container>;

type Story = StoryObj<typeof Container>;

const sizeLabels = {
  fluid: 'Fluid',
  standard: 'Standard',
  narrow: 'Narrow',
  compact: 'Compact',
} as const;

const sizeMaxWidths = {
  fluid: '100%',
  standard: '1160px',
  narrow: '840px',
  compact: '600px',
} as const;

const sizeDescriptions = {
  fluid: 'Fills the full available width with no maximum constraint.',
  standard: 'Constrains content to 1160px — the default for most page layouts.',
  narrow: 'Constrains content to 840px, suited for reading-focused or form layouts.',
  compact: 'Constrains content to 600px, ideal for single-column or focused content.',
} as const;

/** Explore size and element type via the controls panel. */
export const Playground: Story = {
  decorators: [
    (Story, { args }) => (
      <div
        style={{ background: 'var(--color-background-neutral)', paddingBlock: 'var(--size-16)' }}
      >
        <Container {...args}>
          <div style={{ background: 'white', borderRadius: '16px', padding: 'var(--size-16)' }}>
            <Story />
          </div>
        </Container>
      </div>
    ),
  ],
  render: (args) => (
    <>
      <Title type="title-section">{sizeLabels[args.size ?? 'standard']} container</Title>
      <Body>{sizeDescriptions[args.size ?? 'standard']}</Body>
    </>
  ),
};

export const Sandbox = createSandboxStory({
  code: `<Container size="standard">
  <Title type="title-section">Page content</Title>
  <Body>This content is constrained by the Container width.</Body>
</Container>`,
  scope: globalScope,
});

/**
 * Four sizes control the maximum width of the container. <br />
 * `fluid` fills the full viewport, `standard` caps at 1160px, `narrow` at 840px, and `compact` at
 * 600px.
 */
export const Size: Story = {
  argTypes: {
    size: { table: { disable: true } },
    as: { table: { disable: true } },
    className: { table: { disable: true } },
  },
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
      {(['fluid', 'standard', 'narrow', 'compact'] as const).map((size) => (
        <div
          key={size}
          style={{ background: 'var(--color-background-neutral)', paddingBlock: 'var(--size-16)' }}
        >
          <Container size={size}>
            <div style={{ background: 'white', borderRadius: '16px', padding: 'var(--size-16)' }}>
              <Title type="title-section">{sizeLabels[size]}</Title>
              <Body>Max width: {sizeMaxWidths[size]}</Body>
            </div>
          </Container>
        </div>
      ))}
    </div>
  ),
  parameters: {
    docs: {
      source: {
        code: `<Container size="fluid">
  <Title type="title-section">Fluid</Title>
  <Body>Max width: 100%</Body>
</Container>

<Container size="standard">
  <Title type="title-section">Standard</Title>
  <Body>Max width: 1160px</Body>
</Container>

<Container size="narrow">
  <Title type="title-section">Narrow</Title>
  <Body>Max width: 840px</Body>
</Container>

<Container size="compact">
  <Title type="title-section">Compact</Title>
  <Body>Max width: 600px</Body>
</Container>`,
      },
    },
  },
};
