import React from 'react'

import { toast } from '../Toast/Toast'
import { type IconStringList } from '../../components/Icons/Icon.models'

const actions = {
  action1: {
    text: 'Action 1',
    icon: 'pencil' as IconStringList,
    callout: () => toast({ message: 'You clicked action 1!', type: 'success' }),
  },
  action2: {
    text: 'Action 2',
    icon: 'plus' as IconStringList,
    callout: () => toast({ message: 'You clicked action 2!', type: 'success' }),
  },
  download: {
    csv: {
      linkName: 'Download',
      csvName: 'In Stock Protection Optimization',
      csvFormat: {
        api: () =>
          Promise.resolve(new Blob(['csv data'], { type: 'text/csv' })),
        callout: () => toast({ message: 'CSV Callout', type: 'success' }),
        params: {},
      },
    },
  },
  confirmation: {
    text: 'Confirmation',
    icon: 'plus' as IconStringList,
    hasDivider: true,
    destructive: true,
    confirmation: {
      type: 'red' as const,
      header: 'Are you sure?',
      body: 'This will perform some action. Would you like to continue?',
      confirmCallout: () => {
        toast({
          message: 'You clicked confirm!',
          type: 'success',
        })
      },
    },
  },
}

export const buttonsConfig = {
  // Icon Buttons
  pencil: {
    icon: 'pencil' as IconStringList,
    onClick: () =>
      toast({ message: 'You clicked the pencil button!', type: 'success' }),
    tooltip: {
      tooltipContent:
        'This is the tooltip to explain what the pencil button will do.',
    },
  },
  clipboard: {
    icon: 'clipboard' as IconStringList,
    onClick: () =>
      toast({ message: 'You clicked the clipboard button!', type: 'success' }),
    tooltip: {
      tooltipContent:
        'This is the tooltip to explain what the clipboard button will do.',
    },
  },
  like: {
    icon: 'like' as IconStringList,
    onClick: () =>
      toast({ message: 'You clicked the like button!', type: 'success' }),
    tooltip: {
      tooltipContent:
        'This is the tooltip to explain what the like button will do.',
    },
  },
  trash: {
    icon: 'trash' as IconStringList,
    onClick: () =>
      toast({ message: 'You clicked the trash button!', type: 'success' }),
    tooltip: {
      tooltipContent:
        'This is the tooltip to explain what the trash button will do.',
    },
  },
  // Standard Buttons
  standard: {
    onClick: () =>
      toast({
        message: 'You clicked the standard button!',
        type: 'success',
      }),
    children: 'Button Text',
  },
  // Action Button
  actions: {
    actions: [actions.action1, actions.action2, actions.download],
  },
  // Action Button with Tooltip
  actionsWithTooltip: {
    actions: [actions.action1, actions.action2, actions.download],
    tooltip: {
      tooltipContent: 'This is the tooltip.',
    },
  },
  // Action Button with Confirmation
  actionsWithConfirmation: {
    actions: [actions.action1, actions.action2, actions.confirmation],
  },
}

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

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

export const buttonGroupDocs = {
  description: (
    <span>
      The <code>ButtonGroup</code> component provides a cohesive and organized
      way to display a group of 2 or 3 buttons. A button within the group can be
      a standard button with text, an icon-only button with a tooltip, or a
      button with a popover of actions. Icon buttons and standard buttons also
      have the option to include a confirmation popover for added user
      interaction and confirmation.
    </span>
  ),
  infoBullets: [
    <span key='first-bullet'>
      For icon-only buttons, always include a tooltip to describe the button's
      functionality and provide clarity to users.
    </span>,
    <span key='second-bullet'>
      Optionally, add a confirmation popover to icon buttons and standard
      buttons, ensuring users confirm critical actions to prevent accidental
      clicks.
    </span>,
  ],
}