'use client'

import {styled, useColorScheme} 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'

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 {mode, setMode} = useColorScheme()
  const pathname = usePathname()
  const selectedPath = pathname === '/' ? 'akey' : pathname.split('/')[1]

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