import React, { type ReactElement, type ElementType } from 'react';
import {
  Box,
  Button,
  Dialog,
  DialogContent,
  DialogTitle,
  IconButton,
  TextField,
  Typography,
} from '@mui/material';
import Slide from '@mui/material/Slide';
import type { TransitionProps } from '@mui/material/transitions';
import { CloseCircle } from 'iconsax-react';
import { Icon } from '@rkheftan/harmony-ui';

const MobileSlide = React.forwardRef(function MobileSlide(
  props: TransitionProps & { children: ReactElement<unknown, ElementType> },
  ref: React.Ref<unknown>,
) {
  return <Slide direction="up" ref={ref} {...props} />;
});

interface SocialMediaDialogProps {
  open: boolean;
  onClose: () => void;
  t: (key: string) => string;
  emailInput: string;
  setEmailInput: (val: string) => void;
  emailError: boolean;
  setEmailError: (val: boolean) => void;
  fullScreen: boolean;
  computedMaxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
}

export default function SocialMediaDialog({
  open,
  onClose,
  t,
  emailInput,
  setEmailInput,
  emailError,
  setEmailError,
  fullScreen,
  computedMaxWidth,
}: SocialMediaDialogProps) {
  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setEmailInput(value);
    setEmailError(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value));
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      fullWidth
      fullScreen={fullScreen}
      maxWidth={computedMaxWidth}
      scroll="paper"
      keepMounted
      TransitionComponent={fullScreen ? MobileSlide : undefined}
      PaperProps={{
        sx: {
          borderRadius: { xs: 0, sm: 2 },
          width: { xs: '100%', sm: '30%' },
          height: { xs: '100%', sm: '43%' },
        },
      }}
    >
      <DialogTitle
        sx={{
          display: 'flex',
          alignItems: 'center',
          fontWeight: 'bold',
          fontSize: '16px',
          gap: 1,
          p: { xs: 1.5, sm: 2 },
          bgcolor: 'background.default',
        }}
      >
        <IconButton onClick={onClose} aria-label="Close">
          <Icon Component={CloseCircle} size="medium" color="primary.main" />
        </IconButton>
        {t('settingForm.addEmailButton')}
      </DialogTitle>

      <DialogContent
        dividers
        sx={{
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
          py: { xs: 1.5, sm: 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"
          autoComplete="email"
          inputMode="email"
          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
          autoFocus
        />

        <Button
          variant="contained"
          fullWidth
          sx={{ textTransform: 'none', borderRadius: 2 }}
          disabled={emailError || emailInput === ''}
        >
          {t('settingForm.verificationCodeButton')}
        </Button>
      </DialogContent>
    </Dialog>
  );
}