import { useState } from 'react';
import {
  Box,
  Button,
  Menu,
  MenuItem,
  ListItemIcon,
  ListItemText,
} from '@mui/material';
import { Message, Google, ArrowDown2 } from 'iconsax-react';
import { Icon } from '@rkheftan/harmony-ui';

export type SocialChoice = 'email' | 'google';

type Props = {
  t: (key: string) => string;
  onSelect: (choice: SocialChoice) => void;
  buttonLabel: string;
};

export default function SocialMediaMenu({ t, onSelect, buttonLabel }: Props) {
  const [anchor, setAnchor] = useState<null | HTMLElement>(null);
  const openMenu = Boolean(anchor);

  return (
    <Box sx={{ display: 'flex', justifyContent: 'flex-start', gap: 1 }}>
      <Button
        onClick={(e) => setAnchor(e.currentTarget)}
        variant="outlined"
        sx={{
          border: '1px solid',
          borderRadius: 1,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          whiteSpace: 'nowrap',
          textTransform: 'none',
          gap: 1,
        }}
        aria-haspopup="menu"
        aria-expanded={openMenu ? 'true' : undefined}
        aria-controls={openMenu ? 'social-menu' : undefined}
      >
        <Box component="span">{buttonLabel}</Box>
        <Icon
          Component={ArrowDown2}
          size="small"
          color="primary.main"
          variant="Bold"
        />
      </Button>

      <Menu
        id="social-menu"
        anchorEl={anchor}
        open={openMenu}
        onClose={() => setAnchor(null)}
        PaperProps={{ sx: { width: anchor ? anchor.offsetWidth : 'auto' } }}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
      >
        <MenuItem
          onClick={() => {
            setAnchor(null);
            onSelect('email');
          }}
        >
          <ListItemIcon>
            <Icon Component={Message} size="medium" color="primary.main" />
          </ListItemIcon>
          <ListItemText>{t('settingForm.email')}</ListItemText>
        </MenuItem>

        <MenuItem
          onClick={() => {
            setAnchor(null);
            onSelect('google');
          }}
        >
          <ListItemIcon>
            <Icon Component={Google} size="medium" color="primary.main" />
          </ListItemIcon>
          <ListItemText>{t('settingForm.google')}</ListItemText>
        </MenuItem>
      </Menu>
    </Box>
  );
}
