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

import { DocsTemplate } from '../../../.storybook'
import Button from '../Button/Button'
import { InformationPane } from './InformationPane'
import { toast } from '../Toast/Toast'
import { otherData, productData } from './information-pane-story-data'

const meta: Meta<typeof InformationPane> = {
  title: 'Components/InformationPane',
  component: InformationPane,
  argTypes: {
    children: { control: false },
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-607&t=jsd8kEmb1sJfCa2m-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-613&t=KUWdug3XS3dQ8hnl-0'
          description={
            <span>
              The <code>InformationPane</code> component serves as a high-level
              overview of a product, seller, user profile, or any other entity.
              It is designed to present essential details in a visually
              appealing manner, incorporating a name or title, an associated
              image, and relevant data points. The <code>InformationPane</code>{' '}
              offers users a quick and informative snapshot, making it useful
              for providing key insights and context about the entity being
              displayed.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Place the <code>InformationPane</code> to the left of product
              detail pages, user profiles, or any relevant sections where a
              concise overview is required.
            </span>,
            'Include relevant data points, such as ratings, reviews, or key attributes, within the Information Pane to offer users a comprehensive understanding.',
          ]}
        />
      ),
    },
  },
}
export default meta
type Story = StoryObj<typeof InformationPane>

const Template: Story = {
  render: (args) => {
    return <InformationPane {...args} />
  },
}

const productName = `Magnesium Glycinate but let’s pretend this actually ends up being a really long title, this is how it would appear.`
const imgUrl = 'https://m.media-amazon.com/images/I/41Jd5FzxAkL.SL500.jpg'
const productUrl = 'https://www.amazon.com'

const BasicStructure = (
  <div>
    <InformationPane.ImageAndName
      imgUrl={imgUrl}
      product={{
        name: productName,
        url: productUrl,
      }}
    />
    <InformationPane.Divider />
    <InformationPane.Section data={productData} isTwoColumns />
    <InformationPane.Divider />
    <InformationPane.Section data={otherData} />
  </div>
)

const basicConfig = {
  labelAndData: {
    label: 'Storybook',
    data: 'InformationPane',
    check: true,
  },
  tag: {
    children: 'Story',
    color: 'green' as const,
  },
  edit: () =>
    toast({
      type: 'success',
      message: 'You clicked the edit button',
    }),
  children: BasicStructure,
}
const { labelAndData, tag, edit, children } = basicConfig

export const Basic: Story = {
  ...Template,
  args: {
    header: {
      labelAndData,
      tag,
    },
    children,
  },
}

export const NoHeaderTag: Story = {
  ...Template,
  args: {
    header: {
      labelAndData,
    },
    children,
  },
}

export const HeaderWithEdit: Story = {
  ...Template,
  args: {
    header: {
      labelAndData,
      edit,
    },
    children,
  },
}

export const HeaderWithTagAndEdit: Story = {
  ...Template,
  args: {
    header: {
      labelAndData,
      tag,
      edit,
    },
    children,
  },
}

export const headerHasLargeContent = {
  ...Template,
  args: {
    header: {
      labelAndData: {
        label: 'Storybook',
        data: 'InformationPane with a lot of content in the header',
        check: true,
      },
      tag,
      edit,
    },
    children,
  },
}

export const NoHeader: Story = {
  ...Template,
  args: {
    children,
  },
}

export const LongProductName: Story = {
  ...Template,
  args: {
    header: {
      labelAndData,
      tag,
    },
    children: (
      <div>
        <InformationPane.ImageAndName
          imgUrl={imgUrl}
          product={{
            name: 'Pure Encapsulations O.N.E. Multivitamin | Once Daily Multivitamin with Antioxidant Complex Metafolin, CoQ10, and Lutein to Support Vision, Cognitive Function, and Cellular Health* | 120 Capsules',
            url: productUrl,
          }}
        />
        <InformationPane.Divider />
        <InformationPane.Section data={productData} isTwoColumns />
        <InformationPane.Divider />
        <InformationPane.Section data={otherData} />
      </div>
    ),
  },
}

export const NoProductLink: Story = {
  ...Template,
  args: {
    header: {
      labelAndData,
      tag,
    },
    children: (
      <div>
        <InformationPane.ImageAndName
          imgUrl={imgUrl}
          product={{
            name: productName,
          }}
        />
        <InformationPane.Divider />
        <InformationPane.Section data={productData} isTwoColumns />
      </div>
    ),
  },
}

export const CustomSectionPlacement: Story = {
  ...Template,
  args: {
    header: {
      labelAndData,
      tag,
    },
    children: (
      <div>
        <InformationPane.Section data={otherData} />
        <InformationPane.Divider />
        <InformationPane.Section data={productData} isTwoColumns />
        <InformationPane.Divider />
        <InformationPane.ImageAndName
          imgUrl={imgUrl}
          product={{
            name: productName,
            url: productUrl,
          }}
        />
      </div>
    ),
  },
}

export const CustomSection: Story = {
  ...Template,
  args: {
    header: {
      labelAndData,
      tag,
    },
    children: (
      <div>
        <InformationPane.CustomSection>
          <span>Custom content would go here</span>
          <Button>Action</Button>
        </InformationPane.CustomSection>
        <InformationPane.Divider />
        <InformationPane.Section data={productData} isTwoColumns />
      </div>
    ),
  },
}

function generateLoremIpsumParagraphs(paragraphCount) {
  const loremIpsumParagraph = (
    <div className='my-2'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco.
    </div>
  )
  const paragraphs = new Array(paragraphCount).fill(loremIpsumParagraph)
  return paragraphs.map((paragraph, index) => (
    <div key={index}>{paragraph}</div>
  ))
}

const SimpleTemplate: Story = {
  render: (args) => {
    return (
      <div
        className='mt-5 flex flex-col gap-4 p-4'
        style={{ maxWidth: '300px', overflowY: 'scroll', minHeight: '600px' }}
      >
        <div className='mt-4'>
          <InformationPane {...args}>{args.children}</InformationPane>
        </div>
        <div className='text-xs'>
          This text is not part of the component. It is for demo purposes.
          {generateLoremIpsumParagraphs(10)}
        </div>
      </div>
    )
  },
}

export const Simple: Story = {
  ...SimpleTemplate,
  args: {
    header: {
      labelAndData,
      tag,
    },
    simple: {
      product: {
        name: productName,
        url: productUrl,
      },
      imgUrl,
      identifier: 'B0P477ABD2',
    },
    children: (
      <InformationPane.ImageAndName
        imgUrl={imgUrl}
        product={{
          name: productName,
          url: productUrl,
        }}
      />
    ),
  },
}