import React, { useState } from 'react';
import {
  Box,
  Button,
  Menu,
  MenuItem,
  ListItemIcon,
  ListItemText,
} from '@mui/material';
import { Message, Google, Apple, ArrowDown3 } from 'iconsax-react';
import { Icon } from '@rkheftan/harmony-ui';
import { type SocialMediaMenuProps } from '@/features/profile/types/settingsType';

export default function SocialMediaMenu({
  t,
  onOpenDialog,
}: SocialMediaMenuProps) {
  const [anchor, setAnchor] = useState<null | HTMLElement>(null);
  const openMenu = Boolean(anchor);
  const [open, setOpen] = useState(false);

  const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
    setOpen(true);
    setAnchor(e.currentTarget);
  };
  const handleCloseMenu = () => {
    setOpen(false);
    setAnchor(null);
  };

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'flex-start',
        gap: 1,
      }}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: { xs: 'column', sm: 'row' },
          alignItems: { xs: 'stretch', sm: 'flex-start' },
          gap: 1,
        }}
      >
        <Button
          onClick={handleClickMenu}
          variant="outlined"
          sx={{
            border: '1px solid',
            borderRadius: 1,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            whiteSpace: 'nowrap',
            backgroundColor: open ? 'primary.light' : 'primary.default',
            textTransform: 'none',
          }}
        >
          <Box component="span">{t('settingForm.addEmailOrSocialButton')}</Box>
          <Icon
            Component={ArrowDown3}
            size="medium"
            color="primary.main"
            variant={open ? 'Bold' : 'Outline'}
          />
        </Button>
      </Box>

      <Menu
        anchorEl={anchor}
        open={openMenu}
        onClose={handleCloseMenu}
        PaperProps={{
          sx: {
            width: anchor ? anchor.offsetWidth : 'auto',
            // maxWidth: '90vw',
          },
        }}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
      >
        <MenuItem
          onClick={() => {
            handleCloseMenu();
            onOpenDialog();
          }}
        >
          <ListItemIcon>
            <Icon Component={Message} size="medium" color="primary.main" />
          </ListItemIcon>
          <ListItemText>{t('settingForm.email')}</ListItemText>
        </MenuItem>
        <MenuItem>
          <ListItemIcon>
            <Icon Component={Google} size="medium" color="primary.main" />
          </ListItemIcon>
          <ListItemText>{t('settingForm.google')}</ListItemText>
        </MenuItem>
        <MenuItem>
          <ListItemIcon>
            <Icon Component={Apple} size="medium" color="primary.main" />
          </ListItemIcon>
          <ListItemText>{t('settingForm.apple')}</ListItemText>
        </MenuItem>
      </Menu>
    </Box>
  );
}