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

import { DocsTemplate } from '../../../.storybook'
import PageFooterComponent from './PageFooter'
import { toast } from '../Toast/Toast'

const meta: Meta<typeof PageFooterComponent> = {
  title: 'Components/PageFooter',
  component: PageFooterComponent,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=1701-2180&t=jsd8kEmb1sJfCa2m-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=1701-2180&t=jsd8kEmb1sJfCa2m-0'
          description={
            <span>
              The <code>PageFooter</code> component is designed to be fixed at
              the bottom of a page, providing a consistent and accessible action
              area. It comprises two sections - left and right. It is up to
              implementation is the left section, right section, or both are
              used. However, at least one of these sections is required. The
              left section can contain either a single <code>Button</code> or
              the <code>Pagination</code> component, catering to different
              navigation needs. The right section can accommodate 1-3{' '}
              <code>Button</code> or <code>ButtonGroup</code> components,
              offering various actions or links.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Use the left section sparingly, ensuring it enhances user
              experience without overcrowding the footer.
            </span>,
            <span key='second-bullet'>
              <code>Button</code> components can be links, actions, or a{' '}
              <code>ButtonGroup</code>.
            </span>,
            <span key='third-bullet'>
              It is recommended to only use 1 <code>Button</code> in mobile for
              the right section. You can accomplish this by using our{' '}
              <code>useMediaQuery</code> or
              <code>useIsMobileView</code> hooks on implementation. It would be
              best to use a <code>ButtonGroup</code> if you need to display more
              than one button in mobile. You can keep the buttons separate in
              screens larger than mobile.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof PageFooterComponent>

const PageFooter = (args) => {
  return (
    <PageFooterComponent
      {...args}
      // This prop is optional and only used to diplay things in Storybook correctly.
      customWidth='calc(100vw - 40px)'
    />
  )
}

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

const button = {
  type: 'button' as const,
  children: 'Secondary',
  onClick: () => {
    toast({ message: 'Secondary clicked', type: 'success' })
  },
}

const buttonGroup = {
  type: 'buttonGroup' as const,
  styleType: 'primary' as const,
  buttons: [
    {
      actions: [
        {
          text: 'Action 1',
          callout: () =>
            toast({ message: 'Action 1 clicked', type: 'success' }),
          icon: 'pencil' as const,
        },
        {
          text: 'Action 2',
          callout: () =>
            toast({ message: 'Action 2 clicked', type: 'success' }),
          icon: 'plus' as const,
        },
      ],
    },
    {
      children: 'Primary Action',
      onClick: () => {
        toast({ message: 'Primary Action clicked', type: 'success' })
      },
    },
  ],
}

const unstyledButton = {
  type: 'button' as const,
  children: 'Button',
  as: 'unstyled' as const,
  onClick: () => {
    toast({ message: 'Button clicked', type: 'success' })
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    rightSection: [buttonGroup],
  },
}

export const NoLeftSection: Story = {
  ...Template,
  args: {
    rightSection: [button, buttonGroup],
  },
}

export const NoRightSection: Story = {
  ...Template,
  args: {
    leftSection: button,
  },
}

export const LeftSectionWithPagination: Story = {
  ...Template,
  args: {
    leftSection: {
      type: 'pagination',
      totalPages: 10,
      currentPage: 1,
      callout: (page) => {
        toast({ message: `Page was changed to ${page}`, type: 'success' })
      },
    },
    rightSection: [button, buttonGroup],
  },
}

export const RightSectionWithThreeButtons: Story = {
  ...Template,
  args: {
    leftSection: unstyledButton,
    rightSection: [
      button,
      {
        type: 'button',
        styleType: 'primary',
        destructive: true,
        onClick: () => {
          toast({ message: 'Destructive clicked', type: 'success' })
        },
        children: 'Destructive',
      },
      buttonGroup,
    ],
  },
}

export const RightSectionWithOneButton: Story = {
  ...Template,
  args: {
    leftSection: button,
    rightSection: [buttonGroup],
  },
}

export const RightSectionWithConfirmationButton: Story = {
  ...Template,
  args: {
    leftSection: button,
    rightSection: [
      {
        type: 'button',
        popoverProps: {
          position: 'top',
        },
        children: 'Confirmation',
        as: 'confirmation',
        confirmation: {
          type: 'red',
          header: 'Are you sure?',
          body: 'This will perform some action. Would you like to continue?',
          confirmCallout: () => {
            toast({ message: 'You clicked confirm!', type: 'success' })
          },
        },
        styleType: 'tertiary',
      },
      buttonGroup,
    ],
  },
}