'use client'

import {useContext} from 'react'
import {styled, useTheme} from '@mui/material/styles'
import LightModeIcon from '@mui/icons-material/LightMode'
import DarkModeIcon from '@mui/icons-material/DarkMode'
import {Box} from '@mui/material'
import {usePathname} from 'next/navigation'
import {ColorModeContext} from '../app/theme-registy'

const PREFIX = 'chanje-tem'

const klas = {
  chanje: `${PREFIX}-chanje`,
  chanjeFiks: `${PREFIX}-chanjeFiks`
}

const StyledBox = styled(Box)({
  [`& .${klas.chanje}`]: {
    position: 'absolute',
    right: '1em',
    top: '60px',
    zIndex: 1,
    cursor: 'pointer'
  },
  [`& .${klas.chanjeFiks}`]: {
    position: 'fixed',
    right: '0.5em',
    top: '68px',
    zIndex: 2,
    cursor: 'pointer'
  }
})

export default function ChanjeTem() {
  const colorMode = useContext(ColorModeContext)
  const theme = useTheme()
  const pathname = usePathname()
  const selectedPath = pathname === '/' ? 'akey' : pathname.split('/')[1]

  const jereClik = seletedMode => {
    colorMode.toggleColorMode()
    localStorage.setItem('oki-tem', seletedMode)
  }

  return (
    <StyledBox>
      <div className={selectedPath === 'paroles' ? klas.chanjeFiks : klas.chanje} >
        {theme.palette.mode === 'dark' ? (
          <LightModeIcon onClick={() => jereClik('light')} />
        ) : (
          <DarkModeIcon onClick={() => jereClik('dark')} />
        )}
      </div>
    </StyledBox>
  )
}