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

import { DocsTemplate } from '../../../.storybook'
import GuidedTour from './GuidedTour'
import Button from '../Button/Button'
import EmptyState from '../EmptyState/EmptyState'
import Icon from '../Icons/Icon'
import Tag from '../Tag/Tag'
import { toast } from '../Toast/Toast'

const meta: Meta<typeof GuidedTour> = {
  title: 'Components/GuidedTour',
  component: GuidedTour,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-606&t=jsd8kEmb1sJfCa2m-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-606&t=jsd8kEmb1sJfCa2m-0'
          description={
            <span>
              The <code>GuidedTour</code> component is a user onboarding tool
              designed to introduce new features or guide users through the
              application's interface. It provides step-by-step instructions and
              interactive prompts to help users understand the functionality and
              features effectively. The <code>GuidedTour</code> enhances user
              engagement, reduces the learning curve, and ensures a smooth
              onboarding experience for new users.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Use the <code>GuidedTour</code> component to introduce new
              features or changes to existing functionality, ensuring users are
              aware of recent updates.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof GuidedTour>

const Template: Story = {
  render: function Render(args) {
    const [show, setShow] = useState(false)
    const close = () => {
      setShow(false)
    }
    return (
      <div>
        <GuidedTour {...args} closeCallout={close} show={show} />
        <Button
          className='mb-4'
          styleType='primary'
          onClick={() => setShow(true)}
        >
          Start Tour
        </Button>
        <div style={{ width: '700px', maxWidth: '100%' }}>
          <div className='box mb-5 flex justify-between'>
            <span>Page Header</span>
            <Icon
              icon='maleUser'
              className='guided-tour__maleUser-icon'
              iconSize='20px'
            />
          </div>
          <div className='flex gap-4'>
            <div className='flex flex-col gap-4'>
              <div>
                Here is some content that will not have a Guided tour associated
                with it.
              </div>

              <span className='flex items-center gap-2 text-red'>
                Some text to display{' '}
                <span className='guided-tour__tag'>
                  <Tag color='red'>Pay Attention</Tag>
                </span>
              </span>
            </div>
            <div className='flex flex-col gap-4'>
              <span className='flex items-center gap-2'>
                Some text to display{' '}
                <Icon
                  icon='info'
                  className='guided-tour__info-icon'
                  color='dark-blue'
                  iconSize='16px'
                />
              </span>
              <div>
                Here is some content that will not have a Guided tour associated
                with it. Just a block of text here.
              </div>
              <div>
                Here is some content that will not have a Guided tour associated
                with it. Just a block of text here.
              </div>
              <div>
                Here is some content that will not have a Guided tour associated
                with it. Just a block of text here.
              </div>
              <span className='guided-tour__second-step'>
                <b>Second element to demo.</b>
              </span>
            </div>
          </div>
          <div className='mt-5 flex justify-center'>
            <div
              style={{ width: '500px' }}
              className='guided-tour__empty-state'
            >
              <EmptyState
                primaryText='This is a Demo'
                secondaryText='Showing off the Guided Tour'
              />
            </div>
          </div>
        </div>
      </div>
    )
  },
}

const steps = [
  {
    header: 'Attention Tag',
    body: 'This tag is the first element on the tour. We want to point it out because Tags are cool.',
    selector: '.guided-tour__tag',
  },
  {
    header: 'Line of Text',
    body: 'This is the text for the 2nd step. This is the text for the 2nd step. This is the text for the 2nd step. This is the text for the 2nd step. This is the text for the 2nd step. This is the text for the 2nd step.',
    selector: '.guided-tour__second-step',
  },
  {
    header: 'Informational Icon',
    body: 'This is the text for the info icon step on this tour. We will have some great stuff to say.',
    selector: '.guided-tour__info-icon',
  },
  {
    header: 'Some User Action',
    body: (
      <div className='flex flex-col gap-1'>
        <span>This is the text for the 4th step.</span>
        <span>This is the text for the 4th step.</span>
        <span>This is the text for the 4th step.</span>
        <span>This is the text for the 4th step.</span>
      </div>
    ),
    selector: '.guided-tour__maleUser-icon',
  },
  {
    header: 'Empty State',
    body: 'This is the text the EmptyState component. We want to explain why this would be here.',
    selector: '.guided-tour__empty-state',
  },
]

export const Basic: Story = {
  ...Template,
  args: {
    stepHeaderText: 'New Feature',
    steps: steps,
  },
}

export const WithNextClickHandler: Story = {
  ...Template,
  args: {
    stepHeaderText: 'New Feature',
    nextButtonCallout: (currentStep) =>
      toast({
        message: `Navigating to step ${currentStep + 1}`,
        type: 'info',
      }),
    steps: steps,
  },
}