import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { InfoImage } from './InfoImage/InfoImage';
import { InfoPanel } from './InfoPanel';
import { Paragraph } from './Paragraph/Paragraph';
import { Section } from './Section/Section';

const childrenOptions = {
  Normal: (
    <>
      <Section>
        <InfoImage imgSrc="https://picsum.photos/600" />
      </Section>
      <Section title="Additional Details">
        <Paragraph title="Created">7/22/2020 by axinom</Paragraph>
        <Paragraph title="Last Modified">9/20/2020 by axinom</Paragraph>
        <Paragraph title="External ID">0-9-channel_123457</Paragraph>
        <Paragraph title="Publishing Status">Not Published</Paragraph>
      </Section>
    </>
  ),
  Short: (
    <>
      {' '}
      <Section>
        <Paragraph title="Created">7/22/2020 by axinom</Paragraph>
        <Paragraph title="Last Modified">9/20/2020 by axinom</Paragraph>
      </Section>
      <Section>
        <Paragraph title="Created">7/22/2020 by axinom</Paragraph>
        <Paragraph title="Last Modified">9/20/2020 by axinom</Paragraph>
      </Section>
      <Section>
        <Paragraph title="Created">7/22/2020 by axinom</Paragraph>
        <Paragraph title="Last Modified">9/20/2020 by axinom</Paragraph>
      </Section>
    </>
  ),
  'Missing Values': (
    <>
      <Section title="Regular section">
        <Paragraph title="Created">7/22/2020 by axinom</Paragraph>
        <Paragraph title="Last Modified"></Paragraph>
      </Section>
      <Section title="Section with all empty paragraphs">
        <Paragraph title="Created"></Paragraph>
        <Paragraph title="Last Modified"></Paragraph>
      </Section>
      <Section title="Section with some empty paragraphs">
        <Paragraph title="Created">7/22/2020 by axinom</Paragraph>
        <Paragraph title="Last Modified">9/20/2020 by axinom</Paragraph>
      </Section>
      <Section title="Empty section"></Section>
      <Section title="Section with other components">
        <div>Test</div>
      </Section>
    </>
  ),
};

const meta: Meta<typeof InfoPanel> = {
  title: 'Other Components/InfoPanel',
  component: InfoPanel,
  decorators: [
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    (Story) => (
      <MemoryRouter>
        <div style={{ padding: '30px' }}>
          <Story />
        </div>
      </MemoryRouter>
    ),
  ],
  argTypes: {
    children: {
      options: Object.keys(childrenOptions),
      mapping: childrenOptions,
      control: {
        type: 'select',
      },
    },
  },
  args: { children: childrenOptions.Normal },
};
export default meta;

export const Default: StoryObj<typeof InfoPanel> = {};
