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

import Button from '../Button/Button'
import Icon from '../Icons/Icon'
import Pill from '../Pill/Pill'
import Tooltip from '../Tooltip/Tooltip'
import Accordion from './Accordion'
import { toast } from '../Toast/Toast'
import { DocsTemplate } from '../../../.storybook'

const meta: Meta<typeof Accordion> = {
  title: 'Components/Accordion',
  component: Accordion,
  argTypes: {
    children: {
      control: false,
      description: 'Content to be displayed when accordion is expanded',
    },
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=9423-61070&p=f&t=asmGvi6iBO1O56zn-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=9423-61070&p=f&t=asmGvi6iBO1O56zn-0'
          description={
            <span>
              An accordion is a vertically arranged list of headers that expand
              or collapse to show or hide their corresponding content sections.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Use accordions to group and organize related pieces of
              information.
            </span>,
            <span key='second-bullet'>
              Condense content and minimize scrolling, especially when users
              don't need to see all the details upfront.
            </span>,
            <span key='third-bullet'>
              Ideal when space is limited, such as on mobile devices or within
              side panels, and displaying lengthy content in full isn't
              feasible.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof Accordion>

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

export const Default: Story = {
  ...Template,
  args: {
    title: 'First Section',
    subtitle: 'With subtitle',
    children: (
      <div>
        <p>A collapsible accordion component that can show/hide content</p>
        <p>You can put any content here.</p>
      </div>
    ),
  },
}

export const WithInfoIcon: Story = {
  ...Template,
  args: {
    title: (
      <>
        <span>With Info Icon</span>
        <Tooltip tooltipContent='This is the content inside the tooltip'>
          <Icon icon='info' color='dark-blue' iconSize='12px' />
        </Tooltip>
      </>
    ),
    subtitle: (
      <>
        <span>The total Alerts</span>
        <Pill color='blue' number={32} />
      </>
    ),
    children: (
      <p>A collapsible accordion component that can show/hide content</p>
    ),
  },
}

export const WithActions: Story = {
  ...Template,
  args: {
    title: 'Section with Actions',
    subtitle: 'Shows button group',
    actions: (
      <>
        <Button as='button' styleType='secondary'>
          Secondary
        </Button>
        <Button as='button' styleType='secondary'>
          Secondary
        </Button>
        <Icon icon='dotsVertical' color='dark-purple' iconSize='12px' />
      </>
    ),
    children: <p>This section demonstrates actions in the header</p>,
  },
}

export const Disabled: Story = {
  ...Template,
  args: {
    title: 'Disabled Section',
    subtitle: 'This section is disabled',
    disabled: true,
    children: <p>This content cannot be accessed when disabled</p>,
  },
}

export const MultipleItems: Story = {
  render: () => (
    <>
      <Accordion title='First Item' children={<p>Content for first item</p>} />
      <Accordion
        title='Second Item'
        subtitle='With subtitle'
        children={<p>Content for second item</p>}
      />
      <Accordion title='Third Item' children={<p>Content for third item</p>} />
    </>
  ),
}

export const LargeAccordionContent: Story = {
  ...Template,
  args: {
    title: 'First Section',
    subtitle: 'With subtitle',
    children: (
      <div>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
      </div>
    ),
  },
}

export const WithDefaultExpandedState: Story = {
  ...Template,
  args: {
    title: 'Accordion with Default Expanded State',
    subtitle: 'This section is expanded by default',
    isExpanded: true,
    children: <p>This section is expanded by default</p>,
  },
}

export const WithCallout: Story = {
  ...Template,
  args: {
    title: 'Accordion with Callout',
    subtitle: 'Click the accordion to see the callout in action',
    children: <p>Click the accordion to see the callout in action</p>,
    callout: (isExpanded) => {
      toast({
        message: `Accordion is now ${isExpanded ? 'expanded' : 'collapsed'}.`,
        type: 'info',
      })
    },
  },
}

export const WithControlledRadioSelection: Story = {
  ...Template,
  args: {
    title: 'Accordion with Controlled Radio Selection',
    checked: true,
    children: (
      <p>
        The state of the Accordion radio button can be managed on the
        application side.
      </p>
    ),
  },
}

export const WithBackgroundColor: Story = {
  ...Template,
  args: {
    title: 'Accordion with Background Color',
    backgroundColor: 'faint-gray',
    children: <p>Background color will also be applied to content part.</p>,
  },
}

export const WithCaretText: Story = {
  ...Template,
  args: {
    title: 'Accordion with Background Color',
    backgroundColor: 'faint-gray',
    children: <p>Background color will also be applied to content part.</p>,
    caretText: <p>EDIT DETAILS</p>,
  },
}

export const WithoutRadioButton: Story = {
  ...Template,
  args: {
    title: 'First Section',
    subtitle: 'With subtitle',
    showRadioButton: false,
    children: (
      <div>
        <p>A collapsible accordion component that can show/hide content</p>
        <p>You can put any content here.</p>
      </div>
    ),
  },
}