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={{
        backgroundColor: '#F5F5F5',
        display: 'flex',
        justifyContent: 'center',
        p: 2,
      }}
    >
      <CardContainer
        title={t('settingForm.titleSocial')}
        subtitle={t('settingForm.descriptionSocial')}
        action={
          <Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
            <Button
              onClick={handleClickMenu}
              variant="outlined"
              size="large"
              sx={{
                maxWidth: '187px',
                height: '42px',
                border: '1px solid',
                borderColor: '#2979FF',
                borderRadius: '8px',
                color: '#2979FF',
                fontSize: '14px',
                display: 'flex',
                justifyContent: 'space-between',
                px: 2,
              }}
            >
              {t('settingForm.addEmailOrSocialButton')}
              {openMenu && <ArrowDown3 size="20" color="#2979FF" />}
            </Button>
            <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
                onClick={() => {
                  handleCloseMenu();
                  handleOpenDialog();
                }}
              >
                <ListItemIcon>
                  <Google size={20} color="#4285F4" />
                </ListItemIcon>
                <ListItemText>{t('settingForm.google')}</ListItemText>
              </MenuItem>
              <MenuItem
                onClick={() => {
                  handleCloseMenu();
                  handleOpenDialog();
                }}
              >
                <ListItemIcon>
                  <Apple size={20} color="black" />
                </ListItemIcon>
                <ListItemText>{t('settingForm.apple')}</ListItemText>
              </MenuItem>
            </Menu>
          </Box>
        }
      >
        <Box
          sx={{
            width: '100%',
            backgroundColor: 'white',
            borderRadius: '8px',
            p: 2,
          }}
        >
          {emailList.map((item, index) => (
            <Box
              key={index}
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                p: 1,
                borderBottom:
                  index !== emailList.length - 1 ? '1px solid #eee' : 'none',
              }}
            >
              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                {item.provider === 'google' && (
                  <Google
                    size="20"
                    variant="Bold"
                    color="#4285F4"
                    style={{ marginLeft: 8 }}
                  />
                )}
                {item.provider === 'apple' && (
                  <Apple
                    size="20"
                    variant="Bold"
                    color="black"
                    style={{ marginLeft: 8 }}
                  />
                )}
                {item.provider === 'email' && (
                  <Sms
                    size="20"
                    variant="Bold"
                    color="#1976d2"
                    style={{ marginLeft: 8 }}
                  />
                )}
                <Box>
                  <Typography sx={{ fontWeight: 'bold', fontSize: '14px' }}>
                    {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',
              backgroundColor: '#F5F5F5',
              fontWeight: 'bold',
              fontSize: '16px',
              gap: 1,
            }}
          >
            <IconButton onClick={handleCloseDialog} size="small">
              <CloseSquare size="24" color="gray" />
            </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={{
                  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 }}>
                <Button
                  sx={{
                    width: '50%',
                    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
                  sx={{
                    width: '50%',
                    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>
  );
}