import React from 'react';
import Modal from 'react-modal';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

interface SharedEmailDialogProps {
  open: boolean;
  onClose: () => void;
  title: string;
  recipientLabel: string;
  sendLabel: string;
  cancelLabel: string;
  invalidEmailText: string;
  generalErrorText: string;
  emails: string[];
  emailValue: string;
  messageValue: string;
  sendError?: unknown;
  onEmailChange: (value: string) => void;
  onMessageChange: (value: string) => void;
  onSend: (email: string, message: string) => void;
}

export default function SharedEmailDialog({
  open,
  onClose,
  title,
  recipientLabel,
  sendLabel,
  cancelLabel,
  invalidEmailText,
  generalErrorText,
  emails,
  emailValue,
  messageValue,
  sendError,
  onEmailChange,
  onMessageChange,
  onSend,
}: SharedEmailDialogProps) {
  const normalizedEmail = (emailValue || '').trim();
  const hasEmailInput = normalizedEmail.length > 0;
  const isValidEmail = emailPattern.test(normalizedEmail);
  const canSend = hasEmailInput && isValidEmail;
  const showInvalidEmail = hasEmailInput && !isValidEmail;

  return (
    <Modal
      contentLabel='Email To'
      className='shared-email-dialog-modal'
      isOpen={open}
      onRequestClose={onClose}
      ariaHideApp={false}
    >
      <div className='shared-email-dialog'>
        <div className='shared-email-dialog__header'>
          <h4 className='shared-email-dialog__title'>{title}</h4>
        </div>
        <div className='shared-email-dialog__body'>
          <label>
            <b>{recipientLabel}</b>
          </label>
          <Autocomplete
            freeSolo
            selectOnFocus
            handleHomeEndKeys
            className='shared-email-dialog__select'
            options={emails}
            value={emailValue || ''}
            inputValue={emailValue || ''}
            onInputChange={(event, newInputValue) => {
              onEmailChange(newInputValue || '');
            }}
            onChange={(event, newValue) => {
              onEmailChange(newValue || '');
            }}
            renderInput={(params) => (
              <TextField
                {...params}
                variant='outlined'
                size='small'
                error={showInvalidEmail}
                helperText={showInvalidEmail ? invalidEmailText : ''}
                FormHelperTextProps={{ sx: { whiteSpace: 'pre-line' } }}
              />
            )}
          />

          <textarea
            className='shared-email-dialog__textarea'
            onChange={(event) => onMessageChange(event.target.value)}
            value={messageValue || ''}
          />
          {sendError ? <p className='text-danger'>{generalErrorText}</p> : null}

          <div className='shared-email-dialog__buttons'>
            <button className='btn btn-secondary' onClick={onClose}>
              {cancelLabel}
            </button>
            <button
              className='btn btn-primary'
              onClick={() => onSend(normalizedEmail, messageValue || '')}
              disabled={!canSend}
            >
              {sendLabel}
            </button>
          </div>
        </div>
      </div>
    </Modal>
  );
}