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

import { DocsTemplate } from '../../../.storybook'
import { SpreadsheetPane } from './SpreadsheetPane'

const meta: Meta<typeof SpreadsheetPane> = {
  title: 'Components/Spreadsheet/SpreadsheetPane',
  component: SpreadsheetPane,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>SpreadsheetPane</code> component serves as a companion
              container designed to work seamlessly with a{' '}
              <code>Spreadsheet</code>. It is specifically tailored to display
              information tied to the <code>Spreadsheet</code> data, such as
              errors, suggested changes, or actions that can directly impact the
              contents of the <code>Spreadsheet</code>. This component enhances
              the user's ability to interact with and manage the data within the{' '}
              <code>Spreadsheet</code>.
            </span>
          }
        />
      ),
    },
  },
  decorators: [
    (Story) => (
      <div className='flex h-[500px] w-[400px] justify-end'>
        <Story />
      </div>
    ),
  ],
}
export default meta

type Story = StoryObj<typeof SpreadsheetPane>

const Template: Story = {
  render: function Render(args) {
    const [collapsed, setCollapsed] = useState(false)

    return (
      <SpreadsheetPane
        {...args}
        collapsed={collapsed}
        setCollapsed={setCollapsed}
      />
    )
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    headerText: 'Header here',
    children: ({ collapsed }) =>
      !collapsed ? (
        <div>
          <SpreadsheetPane.LargeAlert color='blue'>
            This would be a message to promote an action.
          </SpreadsheetPane.LargeAlert>
          <SpreadsheetPane.ContentBlock>
            Content Here
          </SpreadsheetPane.ContentBlock>
        </div>
      ) : (
        <></>
      ),
    tooltipInfo: 'Tooltip info here',
    subHeader: {
      label: 'Subheader label',
      data: 'Data Here',
      check: true,
    },
  },
}

export const WithoutTooltip: Story = {
  ...Template,
  args: {
    headerText: 'Header here',
    children: ({ collapsed }) =>
      !collapsed ? (
        <div>
          <SpreadsheetPane.LargeAlert color='pink'>
            This would be a message to promote an action.
          </SpreadsheetPane.LargeAlert>
          <SpreadsheetPane.ContentBlock>
            No informational tooltip above.
          </SpreadsheetPane.ContentBlock>
        </div>
      ) : (
        <></>
      ),
    subHeader: {
      label: 'Subheader label',
      data: 'Data Here',
      check: true,
    },
  },
}

export const WithoutSubHeader: Story = {
  ...Template,
  args: {
    headerText: 'Header here',
    children: ({ collapsed }) =>
      !collapsed ? (
        <div>
          <SpreadsheetPane.LargeAlert color='pink'>
            This would be a message to promote an action.
          </SpreadsheetPane.LargeAlert>
          <SpreadsheetPane.ContentBlock>
            No informational tooltip above.
          </SpreadsheetPane.ContentBlock>
        </div>
      ) : (
        <></>
      ),
  },
}

export const WithTooltipButWithoutSubHeader: Story = {
  ...Template,
  args: {
    headerText: 'Header here',
    children: ({ collapsed }) =>
      !collapsed ? (
        <div>
          <SpreadsheetPane.LargeAlert color='pink'>
            This would be a message to promote an action.
          </SpreadsheetPane.LargeAlert>
          <SpreadsheetPane.ContentBlock>
            No informational tooltip above.
          </SpreadsheetPane.ContentBlock>
        </div>
      ) : (
        <></>
      ),
    tooltipInfo: 'Tooltip info here',
  },
}

const loremIpsum = () => {
  return Array.from({ length: 50 }, (_, index) => (
    <div key={index}>Lorem ipsum line {index + 1}</div>
  ))
}

export const LargeContent: Story = {
  ...Template,
  args: {
    headerText: 'Header here',
    subHeader: {
      label: 'Subheader label',
      data: 'Data Here',
      check: true,
    },
    children: ({ collapsed }) =>
      !collapsed ? (
        <div>
          <SpreadsheetPane.LargeAlert color='pink'>
            Content section can be scrolled.
          </SpreadsheetPane.LargeAlert>
          <SpreadsheetPane.ContentBlock>
            <div className='flex flex-col gap-4 text-xs'>{loremIpsum()}</div>
          </SpreadsheetPane.ContentBlock>
        </div>
      ) : (
        <></>
      ),
  },
}