import { useState } from 'react';

import { Button, Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react/*';
import { IconRefresh, IconRestore } from '@tabler/icons-react';

import { type CoachMarkStep } from './types';
import { useCoachRefs } from './useCoachRefs';
import Coachmark from '.';

const meta: Meta<typeof Coachmark> = {
  component: Coachmark,
  title: 'Design System/Coachmark',
  tags: ['autodocs'],
  args: {},
};

export default meta;

type Story = StoryObj<typeof Coachmark>;

// NOTE: The enable/disable buttons are not part of the Coachmark component. Their purpose is to
// prevent all the Coachmarks in the stories from showing at the same time and cluttering the view.

// NOTE 2: The Reset/Reload buttons are not part of the Coachmark component. Their purpose is to
// facilitate the testing of the Coachmark component when Local Storage is used.

export const Default: Story = {
  render: () => {
    const [toggleCoachmark, setToggleCoachmark] = useState(false);
    const steps: CoachMarkStep[] = [
      {
        image:
          'https://static.desygner.com/wp-content/uploads/sites/13/2022/05/04141642/Free-Stock-Photos-01.jpg',
        title: 'Esto es un título que puede tener hasta dos líneas de texto',
        description:
          'Esto es una breve descripción que puede tener hasta tres lineas de texto y su tamaño es Global-XS/regular.',
        placement: 'right-start',
      },
      {
        title: 'Item 2 del coachmark',
        description: 'Lorem ipsum.',
        placement: 'left-start',
      },
      {
        image:
          'https://www.rockandpop.cl/wp-content/uploads/2020/01/when-someone-says-dont-be-anxious-and-your-anxiety-is-49443513-e1579204068691-300x246.png',
        title: 'Llegamos al final!',
        description: 'Buenas noches.',
        placement: 'bottom',
      },
    ];
    const { stepsWithRefs, setRef } = useCoachRefs(steps);

    return (
      <>
        <Stack>
          <Button
            variant="primary"
            onClick={() => {
              setToggleCoachmark(!toggleCoachmark);
            }}
            sx={{ width: 'fit-content' }}
          >
            {toggleCoachmark ? 'Disable' : 'Enable'}
          </Button>
          <Coachmark
            id="coachmark-story-default"
            steps={stepsWithRefs}
            disableCoachmark={!toggleCoachmark}
          />
          <Stack sx={{ alignItems: 'center', gap: 4 }}>
            <Typography
              variant="globalM"
              ref={setRef(0)}
              sx={{ width: 'fit-content' }}
            >
              Hi, welcome!
            </Typography>
            <Stack
              sx={{
                flexDirection: 'row',
                gap: 2,
                justifyContent: 'space-between',
                width: '100%',
              }}
            >
              <Typography variant="globalS">
                I will not be highlighted T_T
              </Typography>
              <Typography
                variant="globalS"
                ref={setRef(1)}
              >
                I will be the second highlighted text
              </Typography>
            </Stack>
            <Button
              variant="primary"
              ref={setRef(2)}
            >
              Last Highlight
            </Button>
          </Stack>
        </Stack>
        <Button
          variant="secondary"
          sx={{ mt: 4 }}
          onClick={() => {
            localStorage.removeItem('coachmark-story-default');
            window.location.reload();
          }}
          startIcon={<IconRestore />}
        >
          Reset Local Storage
        </Button>
        <Button
          variant="secondary"
          sx={{ mt: 4, ml: 2 }}
          onClick={() => {
            window.location.reload();
          }}
          startIcon={<IconRefresh />}
        >
          Reload with no Reset
        </Button>
      </>
    );
  },
};

// prueba-prod-fix-1
// prueba-prod-fix-1
// prueba-prod-fix-1
// prueba-prod-fix-1
// prueba-prod-fix-1
// prueba-prod-fix-1
// prueba-prod-fix-1
// prueba-prod-fix-1
// prueba-prod-fix-1
// prueba-prod-fix-1
// prueba-prod-fix-1
// prueba-prod-fix-1
// hola
// hola
export const OneStepAndCloseVariations: Story = {
  render: () => {
    const [toggleCoachmark, setToggleCoachmark] = useState(false);
    const steps: CoachMarkStep[] = [
      {
        image:
          'https://static.desygner.com/wp-content/uploads/sites/13/2022/05/04141642/Free-Stock-Photos-01.jpg',
        title: 'Esto es un título que puede tener hasta dos líneas de texto',
        description:
          'Esto es una breve descripción que puede tener hasta tres lineas de texto y su tamaño es Global-XS/regular.',
        placement: 'bottom',
      },
      {
        image:
          'https://static.desygner.com/wp-content/uploads/sites/13/2022/05/04141642/Free-Stock-Photos-01.jpg',
        title: 'Esto es un título que puede tener hasta dos líneas de texto',
        description:
          'Esto es una breve descripción que puede tener hasta tres lineas de texto y su tamaño es Global-XS/regular.',
        placement: 'bottom',
      },
    ];
    const { stepsWithRefs, setRef } = useCoachRefs([steps[0]]);
    const { stepsWithRefs: stepsWithRefsNoFooter, setRef: setNoFooterRef } =
      useCoachRefs([steps[1]]);

    return (
      <>
        <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <Button
            variant="primary"
            onClick={() => {
              setToggleCoachmark(!toggleCoachmark);
            }}
            sx={{ width: 'fit-content' }}
          >
            {toggleCoachmark ? 'Disable' : 'Enable'}
          </Button>
          <Coachmark
            id="coachmark-story-one-step-footer"
            steps={stepsWithRefs}
            disableCoachmark={!toggleCoachmark}
            customEndLabel="Custom label!"
          />
          <Stack sx={{ alignItems: 'center', gap: 4 }}>
            <Typography
              variant="globalM"
              ref={setRef(0)}
              sx={{ width: 'fit-content' }}
            >
              I got a footer! If you [X] I will stay here...
            </Typography>
          </Stack>
          <Coachmark
            id="coachmark-story-one-step-no-footer"
            steps={stepsWithRefsNoFooter}
            disableCoachmark={!toggleCoachmark}
            hideFooterOnOnlyOneStep
            finishOnClose
          />
          <Stack sx={{ alignItems: 'center', gap: 4 }}>
            <Typography
              variant="globalM"
              ref={setNoFooterRef(0)}
              sx={{ width: 'fit-content' }}
            >
              I do not have a footer! And I turn off on [X].
            </Typography>
          </Stack>
        </Stack>
        <Button
          variant="secondary"
          sx={{ mt: 4 }}
          onClick={() => {
            localStorage.removeItem('coachmark-story-one-step-footer');
            localStorage.removeItem('coachmark-story-one-step-no-footer');
            window.location.reload();
          }}
          startIcon={<IconRestore />}
        >
          Reset Local Storage
        </Button>
        <Button
          variant="secondary"
          sx={{ mt: 4, ml: 2 }}
          onClick={() => {
            window.location.reload();
          }}
          startIcon={<IconRefresh />}
        >
          Reload with no Reset
        </Button>
      </>
    );
  },
};