import { useRouter } from 'next/router'

export const CacheStrategySelector = () => {
  const router = useRouter()
  const { asPath, route } = router
  const value = asPath.split('/')[2]

  return (
    <div className="cache-option-toggler">
      <h4>Cache option</h4>
      <select
        name="cache-option"
        onChange={(event) => {
          const newValue = event.currentTarget.value
          const newRoute = route.replace('[cacheStrategy]', newValue)
          router.push(newRoute, undefined, { scroll: false })
        }}
        value={value}
      >
        <option value="no-cache">Without cache</option>
        <option value="memory-cache">Memory Cache</option>
        <option value="session-storage-cache">Session Storage Cache</option>
        <option value="ls-cache">Local Storage Cache</option>
      </select>
    </div>
  )
}
