import React, { useState, useContext } from 'react';
// @mui
import { ButtonBase, Box, Typography, MenuItem, Stack } from '@mui/material';
// components
import Image from '@/components/Image';
import MenuPopover from '@/components/MenuPopover';
import { IconButtonAnimate } from '@/components/animate';
import { LanguageContext } from '@/contexts/LanguageContext';

// ----------------------------------------------------------------------

const LANGS = [
  {
    label: 'Bahasa Indonesia',
    value: 'id-ID',
    icon: '/logo/ic_flag_id.svg',
  },
  {
    label: 'English',
    value: 'en-US',
    icon: '/icons/ic_flag_en.svg',
  },
];

// ----------------------------------------------------------------------

export default function LanguagePopover() {
  const [open, setOpen] = useState<HTMLElement | null>(null);

  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
    setOpen(event.currentTarget);
  };

  const handleClose = () => {
    setOpen(null);
  };

  const { setCurrentLocale } = useContext(LanguageContext);
  const handleChangeLanguage = (language) => {
    localStorage.setItem('currentLocale', language);
    setCurrentLocale(language);
  };

  return (
    <>
      <Box display="flex" alignItems="center" border={0} borderColor="grey.300" borderRadius={3} p={1}>
        
          <IconButtonAnimate
          onClick={handleOpen}
            sx={{
              width: 35,
              height: 35,
              ...(open && { bgcolor: 'action.selected' }),
            }}
          >
            <Image
              disabledEffect
              src={(
                !localStorage.getItem('currentLocale')
                  ? LANGS[0].icon
                  : localStorage.getItem('currentLocale') === 'id-ID'
                    ? LANGS[0].icon
                    : LANGS[1].icon
              )}
              alt={
                !localStorage.getItem('currentLocale')
                  ? LANGS[0].label
                  : localStorage.getItem('currentLocale') === 'id-ID'
                    ? LANGS[0].label
                    : LANGS[1].label
              }
            />  
          </IconButtonAnimate>
        

        <ButtonBase onClick={handleOpen}>
          <Typography variant="body2" component="span" marginRight={1} color="textPrimary">
            Language
          </Typography>
        </ButtonBase>
      </Box>

      <MenuPopover
        open={Boolean(open)}
        anchorEl={open}
        onClose={handleClose}
        sx={{
          mt: 1.5,
          ml: 0.75,
          width: 180,
          '& .MuiMenuItem-root': { px: 1, typography: 'body2', borderRadius: 0.75 },
        }}
      >
        <Stack spacing={0.75}>
          {LANGS.map((option) => (
            <MenuItem
              key={option.value}
              selected={option.value === localStorage.getItem('currentLocale')}
              onClick = {() => {
                handleClose();
                handleChangeLanguage(option.value);
              }}
            >
              <Image
                disabledEffect
                alt={option.label}
                src={option.icon}
                sx={{ width: 28 }}
              />

              <Typography variant="body2" component="span" marginLeft={1} color="textPrimary">
              {option.label}
              </Typography>
            </MenuItem>
          ))}
        </Stack>
      </MenuPopover>
    </>
  );
}