import { __ , _x, _n } from '@wordpress/i18n'
import { useNavigate, useLocation } from "react-router-dom"


function Navigation({routes, index, isPurchase}) {
    const navigate = useNavigate()
    const location = useLocation()
  
    const navigateTo = (i) => {
      const route = routes[i]
      if( location.pathname.includes('theme-options/') ) {
        if( i ) {
          navigate(`/demo-import`)
        } else {
          navigate(`/documentation`)
        }
      } else {
        if (route) {
          navigate(`/${route.slug}`)
        }
      }
    }
    
    let showNavigation = true
    if( location.pathname == '/theme-activation' ) {
      showNavigation = !!isPurchase
    }
    
    return <>
      { showNavigation && <div className="steps-nav">
        <button className="previous" onClick={() => navigateTo(index - 1)} disabled={index === 0}>
        {__('Previous', devia_options.text_domain)}
        </button>
        <button className="next" onClick={() => navigateTo(index + 1)} disabled={index === routes.length - 1}>
        {__('Next', devia_options.text_domain)} 
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="m14.5 6.5-1 1 3.7 3.7H4v1.6h13.2l-3.7 3.7 1 1 5.6-5.5z"></path></svg>
        </button>
      </div> }
    </>
  }

export default Navigation;