Account/src/features/profile/components/SocialMedia.tsx

import {
  Google,
  Apple,
  Sms,
  Trash,
  CloseSquare,
  Message,
  ArrowDown3,
} from 'iconsax-react';
import {
  Box,
  Button,
  Typography,
  Dialog,
  DialogTitle,
  DialogContent,
  IconButton,
  TextField,
  Menu,
  MenuItem,
  ListItemIcon,
  ListItemText,
} from '@mui/material';
import React, { useState } from 'react';
import { CardContainer } from '@/components/CardContainer';
import { useTranslation } from 'react-i18next';

export function SocialMedia() {
  const { t } = useTranslation('profileSetting');
  const [openDialog, setOpenDialog] = useState(false);
  const [emailInput, setEmailInput] = useState('');
  const [emailError, setEmailError] = useState(false);
  const [anchor, setAnchor] = useState<null | HTMLElement>(null);
  const openMenu = Boolean(anchor);

  const handleOpenDialog = () => setOpenDialog(true);
  const handleCloseDialog = () => setOpenDialog(false);

  const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
    setAnchor(e.currentTarget);
  };
  const handleCloseMenu = () => setAnchor(null);
  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setEmailInput(value);
    setEmailError(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value));
  };

  const emailList = [
    { email: 'emailtemp@email.com', provider: 'email', time: '1 ماه پیش' },
    { email: 'emailtemp@gmail.com', provider: 'google', time: '1 ماه پیش' },
  ];

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
        px: 2,
        backgroundColor: 'background.paper',
      }}
    >
      <CardContainer
        title={t('settingForm.titleSocial')}
        subtitle={t('settingForm.descriptionSocial')}
        action={
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'flex-start',
              flexWrap: 'wrap',
              gap: 1,
            }}
          >
            <Box
              sx={{
                display: 'flex',
                flexDirection: { xs: 'column', sm: 'row' },
                alignItems: { xs: 'stretch', sm: 'flex-start' },
                gap: 1,
                width: '100%',
              }}
            >
              <Button
                onClick={handleClickMenu}
                variant="outlined"
                sx={{
                  width: '100%',
                  maxWidth: { sm: '187px' },
                  textTransform: 'none',
                  border: '1px solid',
                  borderColor: 'primary.main',
                  borderRadius: '8px',
                  color: 'primary.main',
                  fontSize: '14px',
                  px: 2,
                  py: 1,
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  whiteSpace: 'nowrap',
                }}
              >
                <Box
                  component="span"
                  sx={{
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    direction: 'rtl',
                  }}
                >
                  {t('settingForm.addEmailOrSocialButton')}
                </Box>
                <ArrowDown3 size="20" color="#2979FF" />
              </Button>
            </Box>

            <Menu
              anchorEl={anchor}
              open={openMenu}
              onClose={handleCloseMenu}
              PaperProps={{
                sx: {
                  width: anchor ? `${anchor.offsetWidth}px` : undefined,
                },
              }}
            >
              <MenuItem
                onClick={() => {
                  handleCloseMenu();
                  handleOpenDialog();
                }}
              >
                <ListItemIcon>
                  <Message size={20} color="black" />
                </ListItemIcon>
                <ListItemText>{t('settingForm.email')}</ListItemText>
              </MenuItem>
              <MenuItem>
                <ListItemIcon>
                  <Google size={20} color="#4285F4" />
                </ListItemIcon>
                <ListItemText>{t('settingForm.google')}</ListItemText>
              </MenuItem>
              <MenuItem>
                <ListItemIcon>
                  <Apple size={20} color="black" />
                </ListItemIcon>
                <ListItemText>{t('settingForm.apple')}</ListItemText>
              </MenuItem>
            </Menu>
          </Box>
        }
      >
        <Box
          sx={{
            width: '100%',
            borderRadius: '8px',
            p: { xs: 1, sm: 2 },
          }}
        >
          {emailList.map((item, index) => (
            <Box
              key={index}
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                flexWrap: 'wrap',
                py: 1,
                gap: 1,
              }}
            >
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                {item.provider === 'google' && (
                  <Google size="20" variant="Bold" color="#4285F4" />
                )}
                {item.provider === 'apple' && (
                  <Apple size="20" variant="Bold" color="black" />
                )}
                {item.provider === 'email' && (
                  <Sms size="20" variant="Bold" color="#1976d2" />
                )}
                <Box>
                  <Typography variant="h6">{item.email}</Typography>
                  <Typography variant="caption" color="text.secondary">
                    {item.time}
                  </Typography>
                </Box>
              </Box>
              <IconButton size="small">
                <Trash size="20" color="gray" variant="Outline" />
              </IconButton>
            </Box>
          ))}
        </Box>

        <Dialog
          open={openDialog}
          onClose={handleCloseDialog}
          fullWidth
          maxWidth="xs"
        >
          <DialogTitle
            sx={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              fontWeight: 'bold',
              fontSize: '16px',
              gap: 1,
            }}
          >
            <IconButton onClick={handleCloseDialog} size="small">
              <CloseSquare size="24" color="#F5F5F5" />
            </IconButton>
            {t('settingForm.addEmailButton')}
          </DialogTitle>
          <DialogContent>
            <Box
              sx={{
                width: '100%',
                display: 'flex',
                flexDirection: 'column',
                gap: 2,
              }}
            >
              <Box>
                <Typography fontWeight="bold">
                  {t('settingForm.newEmail')}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  {t('settingForm.dialogHeader')}
                </Typography>
              </Box>
              <TextField
                fullWidth
                type="email"
                value={emailInput}
                onChange={handleEmailChange}
                error={emailError}
                helperText={emailError ? t('settingForm.emailError') : ''}
                label={t('settingForm.email')}
                placeholder="abc@email.com"
                sx={{
                  '& .MuiOutlinedInput-root': {
                    borderRadius: '8px',
                  },
                }}
              />
              <Button
                variant="contained"
                fullWidth
                sx={{
                  textTransform: 'none',
                  borderRadius: '8px',
                  // backgroundColor: '#1976d2',
                }}
                disabled={emailError || emailInput === ''}
              >
                {t('settingForm.verificationCodeButton')}
              </Button>

              <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
                <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
                <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
                  {t('settingForm.or')}
                </Typography>
                <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
              </Box>

              <Box
                sx={{
                  display: 'flex',
                  gap: 1,
                  flexDirection: { xs: 'column', sm: 'row' },
                }}
              >
                <Button
                  fullWidth
                  sx={{
                    textTransform: 'none',
                    border: 2,
                    borderColor: '#1976d2',
                    color: '#1976d2',
                    borderRadius: '8px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
                  {t('settingForm.google')}
                </Button>
                <Button
                  fullWidth
                  sx={{
                    textTransform: 'none',
                    border: 2,
                    borderColor: '#1976d2',
                    color: '#1976d2',
                    borderRadius: '8px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <Apple size="20" color="black" style={{ marginLeft: 8 }} />
                  {t('settingForm.apple')}
                </Button>
              </Box>
            </Box>
          </DialogContent>
        </Dialog>
      </CardContainer>
    </Box>
  );
}