import TourIcon from '@mui/icons-material/Tour'
import { Box, IconButton } from '@mui/material'
import { ReactNode, useEffect, useState } from 'react'
import ReactJoyride, { Step } from 'react-joyride'
import { useQuery } from 'react-query'
import axios from '../config/axios'
import './CustomJoyRideStyles.css'
import Spinner from './Spinner'

function ReactJoyRide({
  steps,
  children,
  tourName,
  iconPosition,
}: {
  steps: Step[]
  children?: ReactNode
  tourName: string
  iconPosition?: 'left' | 'right'
}) {
  const [run, setRun] = useState(false)

  const fetchTours = (params) => {
    return axios.get(`/square/tours`).then((res) => res.data)
  }

  const { data: toursData, isLoading: toursLoading } = useQuery(
    'tours',
    fetchTours,
  )

  useEffect(() => {}, [run])

  const completeTour = async () => {
    try {
      await axios.post(`/square/tours/complete`, { tourName })
    } catch (error) {
      // console.error('Error in Completing Tour:', error)
    }
  }

  const handleJoyRideCallback = (data) => {
    const { action, status } = data

    if (action === 'reset') {
      setRun(false)
      completeTour()
    }
  }

  const customSteps = steps.map((step) => ({
    ...step,
    content: (
      <div style={{ fontFamily: 'Roboto, sans-serif' }}>{step.content}</div>
    ),
  }))

  if (toursLoading) {
    return <Spinner />
  }

  return (
    <>
      <Box>
        <ReactJoyride
          callback={handleJoyRideCallback}
          run={run}
          steps={customSteps}
          styles={{
            buttonNext: {
              backgroundColor: '#D27D2D',
              color: 'white',
              height: '28px',
              width: '100px',
              padding: '0px',
              fontFamily: 'Roboto, sans-serif',
            },

            buttonBack: {
              backgroundColor: 'transparent',
              color: 'black',
              borderRadius: '4px',
              height: '28px',
              width: '100px',
              gap: '10px',
              marginLeft: '5px',
              padding: '0px',
              border: '1px solid black',
              fontFamily: 'Roboto, sans-serif',
            },

            buttonSkip: {
              backgroundColor: 'transparent',
              color: 'cement',
              borderRadius: '0px',
              border: '0px',
              fontSize: '13px',
              padding: '21px 15px',
              right: '0px',
              top: '0px',
              position: 'absolute',
              lineHeight: 1,
              fontFamily: 'Roboto, sans-serif',
            },
          }}
          continuous
          showSkipButton
          scrollToFirstStep
          disableOverlay
          disableOverlayClose
          disableScrolling
          hideCloseButton
          locale={{
            last: 'Finish',
            next: 'Next',
            skip: 'Skip',
            back: 'Previous',
          }}
        />

        {children}

        <IconButton
          onClick={() => setRun(true)}
          sx={{
            position: 'fixed',
            bottom: '85px',
            left: iconPosition === 'left' ? '235px' : 'auto',
            right: iconPosition === 'right' ? '20px' : 'auto',
            zIndex: 1000,
            borderRadius: '50%',
            width: '50px',
            height: '50px',
            backgroundColor: '#FF0244',
          }}
        >
          <TourIcon sx={{ color: 'white' }} />
        </IconButton>
      </Box>
    </>
  )
}

export default ReactJoyRide
