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

import { DocsTemplate } from '../../../.storybook'
import { type ConfirmationPopoverContentProps } from '../ConfirmationPopover/ConfirmationPopoverContent'
import FormFooterComponent from './FormFooter'
import { toast } from '../Toast/Toast'

const meta: Meta<typeof FormFooterComponent> = {
  title: 'Components/FormComponents/FormFooter',
  component: FormFooterComponent,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>FormFooter</code> component is a set of action buttons
              designed to facilitate user interactions with a form. Typically
              placed in the footer of a <code>SideDrawer</code> or other form
              container, it provides users with essential options to submit,
              save, cancel, or perform other relevant actions related to the
              form's content. <code>FormFooter</code> enhance the usability of
              the form and guide users through the form-filling process.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Include the <code>FormFooter</code> component at the bottom of the
              form container or SideDrawer, making it easily accessible and
              visible to users.
            </span>,
            <span key='second-bullet'>
              Label the buttons clearly, using concise and action-oriented text
              to ensure users understand the outcome of each action.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta
type Story = StoryObj<typeof FormFooterComponent>

const FormFooter = (args) => {
  return (
    <div style={{ width: '500px' }}>
      <FormFooterComponent {...args} />
    </div>
  )
}

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

const resetButtonProps = {
  onClick: () => {
    toast({
      type: 'success',
      message: 'You clicked the Reset button!',
    })
  },
}
const cancelButtonProps = {
  onClick: () => {
    toast({
      type: 'success',
      message: 'You clicked the Cancel button!',
    })
  },
}
const saveButtonProps = {
  onClick: () => {
    toast({
      type: 'success',
      message: 'You clicked the Save button!',
    })
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    resetButtonProps,
    cancelButtonProps,
    saveButtonProps,
  },
}

export const DestructiveButton: Story = {
  ...Template,
  args: {
    resetButtonProps,
    cancelButtonProps,
    saveButtonProps: {
      ...saveButtonProps,
      styleType: 'primary',
      destructive: true,
    },
  },
}

export const NoResetButton: Story = {
  ...Template,
  args: {
    cancelButtonProps,
    saveButtonProps,
  },
}

export const DisabledButtons: Story = {
  ...Template,
  args: {
    resetButtonProps: {
      ...resetButtonProps,
      disabled: true,
    },
    cancelButtonProps: {
      ...cancelButtonProps,
      disabled: true,
    },
    saveButtonProps: {
      ...saveButtonProps,
      disabled: true,
    },
  },
}

export const CustomText: Story = {
  ...Template,
  args: {
    resetButtonProps: {
      ...resetButtonProps,
      children: 'Reset Form',
    },
    cancelButtonProps: {
      ...cancelButtonProps,
      children: 'Cancel Everything',
    },
    saveButtonProps: {
      ...saveButtonProps,
      children: 'Save Changes',
    },
  },
}

const confirmation = {
  type: 'red' as ConfirmationPopoverContentProps['type'],
  header: 'Are you sure?',
  body: 'This will perform some action. Would you like to continue?',
  confirmCallout: () => {
    toast({ message: 'You did it!', type: 'success' })
  },
}

export const SaveConfirmation: Story = {
  ...Template,
  args: {
    resetButtonProps,
    cancelButtonProps,
    saveButtonProps: {
      confirmation: {
        ...confirmation,
        type: 'green',
      },
    },
  },
}

export const SaveConfirmationDestructive: Story = {
  ...Template,
  args: {
    resetButtonProps,
    cancelButtonProps,
    saveButtonProps: {
      styleType: 'primary',
      destructive: true,
      confirmation,
    },
  },
}

export const RedResetButton: Story = {
  ...Template,
  args: {
    resetButtonProps: {
      ...resetButtonProps,
    },
    cancelButtonProps,
    saveButtonProps,
  },
}

export const ResetButtonConfirmation: Story = {
  ...Template,
  args: {
    resetButtonProps: {
      confirmation,
    },
    cancelButtonProps,
    saveButtonProps,
  },
}

export const DisableSaveButton: Story = {
  ...Template,
  args: {
    resetButtonProps: {
      confirmation,
    },
    cancelButtonProps,
    saveButtonProps: {
      ...saveButtonProps,
      disabled: true,
      tooltip: {
        tooltipContent: 'You cannot click this button',
      },
    },
  },
}